在dc.js时间序列图中,可以通过以下方式指定x轴和y轴的输入数据:
var chart = dc.lineChart("#chart-container");
var data = [
{ date: new Date("2022-01-01"), value: 10 },
{ date: new Date("2022-01-02"), value: 20 },
{ date: new Date("2022-01-03"), value: 15 },
// ...
];
var ndx = crossfilter(data);
var dimension = ndx.dimension(function(d) { return d.date; });
chart
.x(d3.scaleTime().domain([minDate, maxDate]))
.y(d3.scaleLinear().domain([0, maxvalue]))
.dimension(dimension)
.group(dimension.group().reduceSum(function(d) { return d.value; }));
其中,minDate
和maxDate
是x轴的最小和最大日期值,maxvalue
是y轴的最大值。
chart.render();
这样,就可以在dc.js时间序列图中指定x轴和y轴的输入数据。在这个过程中,使用了dc.js的数据集(crossfilter)来加载数据,创建了一个维度(dimension)来指定x轴的数据,使用了一个分组(group)来指定y轴的数据。同时,通过调用.x()
和.y()
方法来指定x轴和y轴的比例尺,并使用.domain()
方法来设置其范围。最后,调用.render()
方法来渲染图表。
推荐的腾讯云相关产品:腾讯云对象存储(COS),产品介绍链接地址:https://cloud.tencent.com/product/cos
领取专属 10元无门槛券
手把手带您无忧上云