ts-graph

---

a time series graph using D3.js.

Install

1npm i @d3-charts/ts-graph -S

Demo

1import { random } from 'lodash';
2import TsGraph from '@d3-charts/ts-graph';
3import '@d3-charts/ts-graph/dist/index.css';
4
5function generateSeries(seriesCount = 1000) {
6  const series = [];
7
8  for (let n = 1; n <= seriesCount; n++) {
9    const seriesData = [];
10    const seriesDataCount = random(99, 100);
11
12    for (let m = 1; m <= seriesDataCount; m++) {
13      seriesData.push({
14        timestamp: 1502266250000 + (m * 10000),
15        value: random(0, 1000, 3),
16        marker: {
17          enabled: true,
18          radius: 1,
19        }
20      });
21    }
22
23    series.push({
24      name: `serie-${n}`,
25      data: seriesData,
26    });
27  }
28
29  return series;
30}
31
32new TsGraph({
33  timestamp: 'x',
34  xkey: 'timestamp',
35  ykey: 'value',
36  chart: {
37    renderTo: document.getElementById(`content`),
38  },
39  series: generateSeries(),
40})

Options

1const defaultOptions = {
2  ratio: window.devicePixelRatio || 1,
3  xkey: 0, // time keyName
4  ykey: 1, // value keyName
5  timestamp: 'x', // timestamp type x: Unix Millisecond, X: Unix
6  chart: {
7    id: uniqueId('d3-graph-'),
8    colors: ['#3399CC', '#CC9933', '#9966CC', '#66CC66', '#CC3333', '#99CCCC', '#CCCC66', '#CC99CC', '#99CC99', '#CC6666', '#336699', '#996633', '#993399', '#339966', '#993333'],
9    renderTo: userOptions.chart.renderTo,
10    width: userOptions.chart.renderTo.offsetWidth,
11    height: userOptions.chart.renderTo.offsetHeight || 350,
12    marginTop: 10,
13    marginRight: 10,
14    marginBottom: 10,
15    marginLeft: 10,
16  },
17  xAxis: {
18    lineColor: '#ccc',
19    lineWidth: 1,
20    tickLength: 5,
21    tickpadding: 5,
22    tickColor: '#ccc',
23    labels: {
24      color: '#999',
25      fontSize: 11,
26    },
27  },
28  yAxis: {
29    lineColor: '#ccc',
30    lineWidth: 1,
31    tickLength: 5,
32    tickpadding: 5,
33    tickColor: '#ccc',
34    gridLineColor: '#efefef',
35    labels: {
36      color: '#999',
37      fontSize: 11,
38      style: {
39        fontSize: 11,
40        color: '#999',
41      },
42    },
43    plotLines: [{
44        value: 100,
45        color: 'red',
46    }],
47  },
48  tooltip: {
49    shared: true,
50    formatter: undefined, // 自定义 tooltip 内容 undefined | (points) => StringOfHTML
51  },
52  series: [] // { name: string, data: any[] }[],
53  exemplars: [] // { name: string, data: any[] }[],
54  fillNull: undefined,
55  onZoom: () => {},
56}

Api

update(newOptions)

destroy