数据放置在xAxis -nvd3上的错误日期
数据放置在xAxis -nvd3上的错误日期
提问于 2018-09-10 16:15:05
我已经用nvd3创建了一个linelusBarChart。该图的数据是从REST服务接收的时间序列(包括线条和条形)。我面临的问题与xAxis上的数据放置有关。当我缩小图表时，数据没有放在正确的位置(结果如下图所示)：
但当我放大时，数据被放置在不同的日期，而不是适当的日期(查看下图)：
我该如何解决这个问题？
我的代码是：
chart = nv.models.linePlusBarChart()
.focusEnable(true) //gia na exei to focus Chart (range slider)
.margin({ top: 50, right: 80, bottom: 30, left: 80 })
.color(["rgb(226, 144, 36)", "rgb(66, 30, 109)", "rgb(58, 112, 150)"]);
chart.xAxis.tickFormat(function (d) {
return d3.time.format('%d/%m/%Y')(new Date(d * 1000))
}).showMaxMin(true);
chart.y1Axis.axisLabel("Sentiment Value");
chart.y2Axis.tickFormat(function (d) { return d3.format(',f')(d) });
chart.bars.forceY([0]).padData(false);
chart.lines.forceY([0]).padData(false);
chart.x2Axis.tickFormat(function (d) {
return d3.time.format('%d/%m/%Y')(new Date(d * 1000))
}).showMaxMin(true);
chart.showLegend(false);
multichart_graph = d3.select('#multichart svg');
testdata.map(function (series) {
series.values = series.values.map(function (d) { return { x: d[0], y: d[1] } });
return series;
});
multichart_graph.datum(testdata)
.transition()
.call(chart);所用数据的概述如下：
var testdata = [{
"key": "Orange line", "values": [[1279314000, -0.476492389], [1279400400, -0.4764799323],[1279486800, -0.4764816604],....]},
{
"key": "Forecast line", "values": [[1516140000, -1.0070195523], [1516226400, 3.9973810749],...]},
{
"key": "Bars", "values": [[1516140000, 3], [1516226400, 2], [1516312800, 3],...],"bar": "true"}
]回答 1
Stack Overflow用户
回答已采纳
发布于 2018-09-12 08:19:08
根据您获取NVD3的位置，您的代码将不会运行。
我使用
<script src="http://nvd3.org/assets/js/nv.d3.js"></script>这是与github代码不同的版本。它没有此图表类型的chart.x2Axis。
查看代码(github和nvd3.org)，条形图使用historicalBar模型来显示条形图。这将x值的d3.extent用于指定为bar的值的xAxis (d3.scale.linear)域。使用比例放置条形图，但条形图的宽度为width/data[0].values.length。如果您在组合域开始处添加一个虚拟数据点(2010-07)，则结果是巨大的条形图。不可能由用户和xScale使用的域来控制条宽。
唯一的解决办法就是自己写图表。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52253634
复制相关文章
相似问题