0.7.8 • Published 11 months ago
@d3-charts/ts-graph v0.7.8
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
0.7.8
11 months ago
0.7.7
11 months ago
0.7.4
1 year ago
0.7.6
1 year ago
0.7.5
1 year ago
0.7.2
1 year ago
0.7.1
1 year ago
0.7.3
1 year ago
0.7.0
1 year ago
0.6.7
2 years ago
0.6.6
2 years ago
0.6.9
2 years ago
0.6.8
2 years ago
0.6.10
2 years ago
0.6.11
2 years ago
0.3.9
2 years ago
0.3.11
2 years ago
0.3.10
2 years ago
0.6.3
2 years ago
0.6.2
2 years ago
0.6.5
2 years ago
0.6.4
2 years ago
0.6.1
2 years ago
0.3.8
2 years ago
0.6.0
3 years ago
0.5.1
3 years ago
0.4.1
3 years ago
0.4.2
3 years ago
0.3.7
3 years ago
0.3.6
3 years ago
0.3.5
3 years ago
0.3.4
3 years ago
0.3.3
3 years ago
0.3.2
3 years ago
0.3.1
3 years ago
0.3.0
3 years ago
0.2.4
4 years ago
0.2.2-debug.1
4 years ago
0.2.3
4 years ago
0.2.2
4 years ago
0.2.1
4 years ago
0.2.0
4 years ago
0.1.16
4 years ago
0.1.15
4 years ago
0.1.14
4 years ago
0.1.13
4 years ago
0.1.12
4 years ago
0.1.11
4 years ago
0.1.10
4 years ago
0.1.9
5 years ago
0.1.8
5 years ago
0.1.7
5 years ago
0.1.6
5 years ago
0.1.5
5 years ago
0.1.4
5 years ago
0.1.3
5 years ago
0.1.2
5 years ago
0.1.1
5 years ago
0.1.0
5 years ago