Question

我想用于折线图的数据如下所示：

{ "quarters" : [{ "dateName":"Q1 - 2015", "total":45, "date": "01/02/2015", "location": "WW AA", "care": "Care1", "serviceType": "Long Term Care" }, 
{ "dateName":"Q2 - 2015", "total":10, "date": "01/05/2015", "location": "BB AA", "care": "Care2", "serviceType": "Independent Residence" },
{ "dateName":"Q3 - 2015", "total":35, "date": "01/08/2015", "location": "WW AA", "care": "Care1", "serviceType": "Long Term Care" }, 
{ "dateName":"Q4 - 2015", "total":22, "date": "01/11/2015", "location": "GG NN", "care": "Care1 LTC", "serviceType": "Assisted Living" },{ "dateName":"Q1 - 2016", "total":20, "date": "01/02/2016", "location": "GG NN", "care": "Care2", "serviceType": "Private Long Term Care" }, { "dateName":"Q2 - 2016", "total":10, "date": "01/05/2016", "location": "WW AA", "care": "Care3 LTC" , "serviceType": "Independent Residence" }, { "dateName":"Q3 - 2016", "total":11, "date": "01/08/2016", "location": "BB AA",  "care": "Care3", "serviceType": "Assisted Living"  }, { "dateName":"Q4 - 2016", "total":22, "date": "01/11/2016", "location": "BB AA",  "care": "Care3", "serviceType": "Private Long Term Care" }]}"

根据用例，我可以将日期，月份或季度（如本例所示）作为我的日期字段。在一个完美的场景中，我会使用dateName字段值作为我的X轴值（有效），但我无法使画笔在X轴上使用序数值。

这就是为什么我决定使用日期字段，并格式化X轴上显示的日期，以便显示相应的dateName。

问题是X轴上生成的值与数据源中的值不同。例如，2015年2月1日（2015年2月1日），2015年5月5日（2015年5月1日）x轴生成4月，7月等。如何在X轴上显示自己的日期值？< / p>

Here is the jsfiddle

Answer 1

我解决了这个问题所以我会发布答案，万一有人会偶然发现同样的问题。它并不完美，但它对我有用。我所做的是使用xAxis（）。tickValues（valuesArray）修改X轴上显示的值，使用xAxis（）。tickFormat（）返回我想要的标签值。

tstChart.xAxis().tickValues(datesArray).tickFormat(function (d) { 
    return getDateName(jsonObjArray,d);
});

根据我通过阅读文档的理解，使用xAxis（）修改轴属性有时可能会产生一些问题，但在我的情况下它运行良好。 Here is the updated fiddle.

来自json对象的日期值未正确映射到dc.js折线图的x轴上

1 个答案: