0.27.2 • Published 9 months ago

@fc-plot/ts-graph v0.27.2

Weekly downloads
-
License
-
Repository
-
Last release
9 months ago

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: () => {},
}

Api

update(newOptions)

destroy

0.27.2

9 months ago

0.27.1

12 months ago

0.27.0

12 months ago

0.26.3

1 year ago

0.26.5

1 year ago

0.26.4

1 year ago

0.25.2

1 year ago

0.26.2

1 year ago

0.26.1

1 year ago

0.25.1

1 year ago

0.25.0

1 year ago

0.24.7

2 years ago

0.24.6

2 years ago

0.22.23

2 years ago

0.22.22

2 years ago

0.22.21

2 years ago

0.22.20

2 years ago

0.23.3

2 years ago

0.23.2

2 years ago

0.23.1

2 years ago

0.23.0

2 years ago

0.24.5

2 years ago

0.24.4

2 years ago

0.24.3

2 years ago

0.24.2

2 years ago

0.24.1

2 years ago

0.24.0

2 years ago

0.22.19

2 years ago

0.22.16

2 years ago

0.22.15

2 years ago

0.22.18

2 years ago

0.22.17

2 years ago

0.22.12

2 years ago

0.22.11

2 years ago

0.22.14

2 years ago

0.22.13

2 years ago

0.22.10

2 years ago

0.22.9

2 years ago

0.22.8

2 years ago

0.22.7

2 years ago

0.21.1

3 years ago

0.21.0

3 years ago

0.22.6

2 years ago

0.22.5

3 years ago

0.22.4

3 years ago

0.22.3

3 years ago

0.22.2

3 years ago

0.22.1

3 years ago

0.22.0

3 years ago

0.20.0

3 years ago

0.19.0

3 years ago

0.19.1

3 years ago

0.19.2

3 years ago

0.17.4

3 years ago

0.19.3

3 years ago

0.17.5

3 years ago

0.19.4

3 years ago

0.17.6

3 years ago

0.17.7

3 years ago

0.17.8

3 years ago

0.18.0

3 years ago

0.17.2

3 years ago

0.17.3

3 years ago

0.17.0

3 years ago

0.17.1

3 years ago

0.16.3

3 years ago

0.16.4

3 years ago

0.16.5

3 years ago

0.16.0

3 years ago

0.16.1

3 years ago

0.16.2

3 years ago

0.15.2

3 years ago

0.15.0

3 years ago

0.15.1

3 years ago

0.13.6

3 years ago

0.13.7

3 years ago

0.13.8

3 years ago

0.14.0

3 years ago

0.14.1

3 years ago

0.13.5

3 years ago

0.9.4

3 years ago

0.9.3

3 years ago

0.9.5

3 years ago

0.12.7

3 years ago

0.11.0

3 years ago

0.10.1

3 years ago

0.12.0

3 years ago

0.13.0

3 years ago

0.12.1

3 years ago

0.13.1

3 years ago

0.12.2

3 years ago

0.13.2

3 years ago

0.12.3

3 years ago

0.13.3

3 years ago

0.12.4

3 years ago

0.13.4

3 years ago

0.12.5

3 years ago

0.12.6

3 years ago

0.13.0-debug.2

3 years ago

0.13.1-debug.2

3 years ago

0.13.1-debug.1

3 years ago

0.13.0-debug.1

3 years ago

0.10.0

3 years ago

0.9.0

4 years ago

0.8.1

4 years ago

0.7.2

4 years ago

0.7.1

4 years ago

0.9.2

4 years ago

0.7.4

4 years ago

0.9.1

4 years ago

0.8.2

4 years ago

0.7.3

4 years ago

0.7.0

4 years ago

0.6.0

4 years ago