2015-12-02 1 views
0

данные, которые я хочу использовать для моей линии диаграммы выглядит примерно так:значения Дата от объекта JSon не корректно отображаются на оси Х dc.js линии диаграммы

{ "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-оси, чтобы она отображала соответствующее имя даты.

Проблема в том, что значения, генерируемые на оси X, отличаются от значений, которые у меня есть в моем источнике данных. Например, вместо 1 февраля 2015 года (01/02/2015), 5 мая 2015 года (01/05/2015) ось x генерирует апрель, июль и т. Д. Как я могу отображать собственные значения даты на оси X?

Here is the jsfiddle

ответ

1

Я решил эту проблему, так что я буду размещать ответ в случае, если кто-то будет наткнуться на тот же вопрос. Это не идеально, но это сработало для меня. Что я сделал, это использовать xAxis(). TickValues ​​(valuesArray), чтобы изменить отображаемые значения по оси X и xAxis(). TickFormat(), чтобы вернуть значение метки, которое я хотел.

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

Из того, что я понял, читая документацию, используя XAxis() для изменения свойств оси иногда может создать некоторые проблемы, но она работала хорошо в моем случае. Here is the updated fiddle.