@fc-plot/ts-graph
v0.27.2
Published
a time series graph using D3.js
Downloads
401
Readme
ts-graph
a time series graph using D3.js.
Install
npm i @fc-plot/ts-graph -S
Demo
import { random } from 'lodash';
import TsGraph from '@fc-plot/ts-graph';
import '@fc-plot/ts-graph/dist/index.css';
function generateSeries(seriesCount = 1000) {
const series = [];
for (let n = 1; n <= seriesCount; n++) {
const seriesData = [];
const seriesDataCount = random(99, 100);
for (let m = 1; m <= seriesDataCount; m++) {
seriesData.push({
timestamp: 1502266250000 + (m * 10000),
value: random(0, 1000, 3),
marker: {
enabled: true,
radius: 1,
}
});
}
series.push({
name: `serie-${n}`,
data: seriesData,
});
}
return series;
}
new TsGraph({
timestamp: 'x',
xkey: 'timestamp',
ykey: 'value',
chart: {
renderTo: document.getElementById(`content`),
},
series: generateSeries(),
})
Options
const defaultOptions = {
ratio: window.devicePixelRatio || 1,
xkey: 0, // time keyName
ykey: 1, // value keyName
timestamp: 'x', // timestamp type x: Unix Millisecond, X: Unix
chart: {
id: uniqueId('d3-graph-'),
colors: ['#3399CC', '#CC9933', '#9966CC', '#66CC66', '#CC3333', '#99CCCC', '#CCCC66', '#CC99CC', '#99CC99', '#CC6666', '#336699', '#996633', '#993399', '#339966', '#993333'],
renderTo: userOptions.chart.renderTo,
width: userOptions.chart.renderTo.offsetWidth,
height: userOptions.chart.renderTo.offsetHeight || 350,
marginTop: 10,
marginRight: 10,
marginBottom: 10,
marginLeft: 10,
},
xAxis: {
lineColor: '#ccc',
lineWidth: 1,
tickLength: 5,
tickpadding: 5,
tickColor: '#ccc',
labels: {
color: '#999',
fontSize: 11,
},
},
yAxis: {
lineColor: '#ccc',
lineWidth: 1,
tickLength: 5,
tickpadding: 5,
tickColor: '#ccc',
gridLineColor: '#efefef',
labels: {
color: '#999',
fontSize: 11,
style: {
fontSize: 11,
color: '#999',
},
},
plotLines: [{
value: 100,
color: 'red',
}],
},
tooltip: {
shared: true,
formatter: undefined, // 自定义 tooltip 内容 undefined | (points) => StringOfHTML
},
series: [] // { name: string, data: any[] }[],
fillNull: undefined,
onZoom: () => {},
}