javascript — Highcharts — ряд данных столбцов с накоплением
Я работаю со сложенными столбцами, используя Highcharts.
Ряд данных, который я строю, похож на этот
series: [{
name: 'Apples',
data: [['2014-01-01',5], ['2014-01-02',3], ['2014-01-04',2], ['2014-01-05',7], ['2014-01-06',8]]
}, {
name: 'Oranges',
data: [['2014-01-01',3], ['2014-01-02',7], ['2014-01-04',9], ['2014-01-05',11], ['2014-01-06',19]]
}, {
name: 'Grapes',
data: [['2014-01-01',15], ['2014-01-02',23], ['2014-01-03',12], ['2014-01-05',17], ['2014-01-06',18]]
}]
Если вы посмотрите на данные поближе, я пропущу данные 2014-01-04 для яблок, но вместо этого данные будут объединены в 2014-01-03.
Одним из способов решения этой проблемы является предварительное заполнение категорий и следование тому же порядку для вставки моих значений y, но это не будет хорошим способом решения, так как я могу иметь дело с большими наборами данных в конце.
Любые советы, чтобы идти в правильном направлении, с благодарностью.
ОБНОВИТЬ:
Я заполняю свои координаты x и y значениями из базы данных. База данных дает мне дату в формате (ГГГГ-мм-дд). Так что я конвертирую эту строку в эпохальное время, используя функцию strtotime в PHP strtotime($res[0])
Но потом, когда я заполняю рисовать таблицу, я вижу неправильные даты. Я проверил онлайн доступные конвертеры эпох, и похоже, что конверсия верна, но я все еще не могу понять, что здесь не так.
Даже галочки по оси X, кажется, немного сняты.
Большое спасибо за ваши предложения.
http://jsfiddle.net/emgq47px/3/
ПОСТАНОВИЛИ:
Пришлось умножить время эпохи на 1000. Это работает.
Оригинальный ответ: HighCharts — график временных рядов — нерегулярный интервал даты и времени на xAxis
Решение
Вероятно, лучший способ — использовать ось даты и времени. Это позволяет старшим диаграммам знать, что данные содержат даты, и может правильно отсортировать ось.
xAxis: {
lineWidth: 2,
type: 'datetime'
},
После того, как вы это сделаете, вам нужно указать действительное время даты в ваших данных следующим образом:
data: [[Date.UTC(2014, 0, 1),5],
[Date.UTC(2014, 0, 2),3],
[Date.UTC(2014, 0, 4),2],
[Date.UTC(2014, 0, 5),7],
[Date.UTC(2014, 0, 6),8]]
Обратите внимание, месяцы идут от 0 до 11, а не от 1 до 12, поэтому ноль — январь.
Другие решения
Проблема в том, что вы помечаете тип оси X в категории
xAxis: {
lineWidth: 2,
type: 'category'
},
Поэтому, когда вы назначаете данные data: [['2014-01-01',5], ['2014-01-02',3], как это к нему, то первое значение рассматривается как категория, поэтому при назначении ['2014-01-03',12] как последний, то он заменяет предыдущий ['2014-01-04',12], Вы можете проверить это, оставив первые два как 03, а последний как 04, затем это займет 04, а не покажет 03.
Решение
замещать
type: 'category' to 'datetime'
и дата эпохи
data: [[1388534400000,5], [1388620800000,3], [1388793600000,2], [1388880000000,7]]
Вы можете использовать пользовательскую функцию для метки, если вы хотите отобразить дату на оси X в другом формате или использовать Date.UTC