y 轴上的 nvd3 图表格式
nvd3 Chart Formatting on y-Axis
有谁知道 nvd3 对 y 值所做的任何固有减少?在 JSON.parse 之后数据似乎是正确的,并且 x 值上的日期是正确的,但是绘制的 y 值比输入的要低得多。示例:4.152 的第一个 y 值变为 0,5.557 绘制为 0.273,因此它不仅仅是减去第一个 y 值以在原点开始图表。非常感谢任何见解。
图表代码(在单独的 .js 文件中):
$(function () {
// nvd3 charts
tisa_nvd3_charts.cumulativeLine();
})
// nvd3 charts
tisa_nvd3_charts = {
cumulativeLine: function () {
if ($('#nvd3_cumulativeLine').length) {
nv.addGraph(function () {
var chart = nv.models.cumulativeLineChart()
.useInteractiveGuideline(true)
.x(function (d) { return d[0] })
.y(function (d) { return d[1] })
.color(d3.scale.category20().range())
.transitionDuration(500)
.clipVoronoi(false);
chart.xAxis.tickFormat(function (d) {
return d3.time.format('%m/%d/%y')(new Date(d))
});
chart.yAxis.tickFormat(d3.format('$,.3f'));
d3.select('#nvd3_cumulativeLine svg').datum(cumulativeTestData()).call(chart);
nv.utils.windowResize(chart.update);
return chart;
});
}
}
}
View中的.datum函数:
<script type="text/javascript">
function cumulativeTestData() {
var closes = JSON.parse('@Html.Raw(Json.Encode(Model.Coordinates))')
return [
{
key: "Closing Prices",
mean: 60,
values: closes
},
];
}
</script>
HTML 的正确 JSON.parse:
var closes = JSON.parse('[[1367341200000,4.152],[1369933200000,4.148],[1375203600000,3.459],[1377882000000,3.567], etc.]')
编辑: 这是一个工作 plunkr,它显示了在不正确的 y 轴点绘制的数据的 y 值:plnkr.co/edit/enR6tKQmpKWxroVHDVOQ?p=预览
回去回答这个问题。解决方案非常愚蠢。将图形从累积折线图更改为常规折线图可正确呈现 y 值。可以找到可用的 nvd3 图表的示例 here。
有谁知道 nvd3 对 y 值所做的任何固有减少?在 JSON.parse 之后数据似乎是正确的,并且 x 值上的日期是正确的,但是绘制的 y 值比输入的要低得多。示例:4.152 的第一个 y 值变为 0,5.557 绘制为 0.273,因此它不仅仅是减去第一个 y 值以在原点开始图表。非常感谢任何见解。
图表代码(在单独的 .js 文件中):
$(function () {
// nvd3 charts
tisa_nvd3_charts.cumulativeLine();
})
// nvd3 charts
tisa_nvd3_charts = {
cumulativeLine: function () {
if ($('#nvd3_cumulativeLine').length) {
nv.addGraph(function () {
var chart = nv.models.cumulativeLineChart()
.useInteractiveGuideline(true)
.x(function (d) { return d[0] })
.y(function (d) { return d[1] })
.color(d3.scale.category20().range())
.transitionDuration(500)
.clipVoronoi(false);
chart.xAxis.tickFormat(function (d) {
return d3.time.format('%m/%d/%y')(new Date(d))
});
chart.yAxis.tickFormat(d3.format('$,.3f'));
d3.select('#nvd3_cumulativeLine svg').datum(cumulativeTestData()).call(chart);
nv.utils.windowResize(chart.update);
return chart;
});
}
}
}
View中的.datum函数:
<script type="text/javascript">
function cumulativeTestData() {
var closes = JSON.parse('@Html.Raw(Json.Encode(Model.Coordinates))')
return [
{
key: "Closing Prices",
mean: 60,
values: closes
},
];
}
</script>
HTML 的正确 JSON.parse:
var closes = JSON.parse('[[1367341200000,4.152],[1369933200000,4.148],[1375203600000,3.459],[1377882000000,3.567], etc.]')
编辑: 这是一个工作 plunkr,它显示了在不正确的 y 轴点绘制的数据的 y 值:plnkr.co/edit/enR6tKQmpKWxroVHDVOQ?p=预览
回去回答这个问题。解决方案非常愚蠢。将图形从累积折线图更改为常规折线图可正确呈现 y 值。可以找到可用的 nvd3 图表的示例 here。