Scrapboxでグラフ
※クロスドメイン制約を許可しないと動かないです。
実行
table:test
日付 文字数
2021-01-01 100
2021-01-02 250
2021-01-03 370
code:graph.js
window.onload = function() {
const header = document.getElementById('header').textContent;
const element = document.getElementById('element').innerHTML.split("<br>");
const {
LineChart,
ResponsiveContainer,
Line,
XAxis,
YAxis,
CartesianGrid,
Tooltip
} = Recharts;
class Chart extends React.Component {
render() {
return React.createElement(ResponsiveContainer, {
width: "95%"
}, React.createElement(LineChart, {
data: this.props.data,
margin: {
top: 5,
right: 50,
left: 50,
bottom: 25
}
}, React.createElement(XAxis, {
dataKey: "date",
tickFormatter: props => moment(props).format('YYYY/MM/DD')
}), React.createElement(YAxis, {
domain: 'dataMin', 'dataMax',
ticks: 0, 100, 200, 300, 400, 500, 600, 700, 800, 900, 1000,
unit: "字"
}), React.createElement(CartesianGrid, {
stroke: "#ccc",
strokeDasharray: "3 3"
}), React.createElement(Tooltip, {
labelFormatter: props => moment(props).format('YYYY/MM/DD(ddd)')
}), React.createElement(Line, {
name: "文字数",
dataKey: "文字数",
stroke: "skyblue",
unit: "字"
})));
}
}
const points = element.reduce((points, value) => {
// 読み込みの調整
setTimeout(
function () {
console.log(value);
},
"3000"
);
var point = {
date: moment(value.split(/,/)0).unix() * 1000,
文字数: value.split(/,/)1
};
points.push(point);
return points;
}, []);
ReactDOM.render(React.createElement(Chart, {
data: points
}), document.getElementById('chart'));
}
code:frame.css
body {
margin: 0;
}
h2 {
height: 50px;
margin: 10px;
}
#chart {
width: 100%;
min-width: 600px;
height: 400px;
}
#Scrapbox