Nitrogen Peroxide Monoxide

    @d3-charts/ts-graph

    0.3.8 • Public • Published

    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[] }[],
      fillNull: undefined,
      onZoom: () => {},
    }

    Api

    update(newOptions)

    destroy

    Keywords

    none

    Install

    npm i @d3-charts/ts-graph

    DownloadsWeekly Downloads

    82

    Version

    0.3.8

    License

    MIT

    Unpacked Size

    364 kB

    Total Files

    32

    Last publish

    Collaborators

    • luwenjing
    • xqing9024