@d3-charts/ts-graph

ts-graph

a time series graph using D3.js.

Install

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

Demo

import { random } from 'lodash';
import TsGraph from '@d3-charts/ts-graph';
import '@d3-charts/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[] }[],
  exemplars: [] // { name: string, data: any[] }[],
  fillNull: undefined,
  onZoom: () => {},
}

Api

update(newOptions)

destroy