Highcharts, серии с данными разного размера

В настоящее время я работаю над построением диаграммы в highcharts, где я отображаю данные по неделям и месяцам. Это означает, что на каждый месяц будет приходиться 4,3 недельных графика. Мой вопрос в том, есть ли способ сделать данные по месяцам такой же продолжительности, как и за неделю (то есть, с той же начальной и той же конечной точкой), а не за месяц резко останавливаться после 3-4 точек данных, в то время как по -неделя останавливается после 15 или около того?

В настоящее время это выглядит так: диаграмма

Это ежедневно/еженедельно, но будет изменено на еженедельно/ежемесячно. Применяется тот же принцип. :)

Спасибо!


highcharts highcharts-ng
person yusijs    schedule 24.08.2016    source источник
comment
Удалось выяснить это на основе highcharts.com/demo/spline-irregular-time   -  person yusijs    schedule 25.08.2016
comment
Поскольку другие могут прийти к этому вопросу с похожей ситуацией, рассмотрите возможность ответа на свой вопрос с обновленным кодом и тем, как вы решили свою проблему. Другие оценят ваши усилия!   -  person Mike Zavarello    schedule 25.08.2016
comment
Справедливое замечание, ответ будет добавлен позже сегодня! :)   -  person yusijs    schedule 25.08.2016

Ответы (1)


arrow_upward
0
arrow_downward

Итак, моя цель здесь состояла в том, чтобы получить средние данные за неделю, перечисленные вместе с ежедневными данными. Хотя я довольно долго боролся, решение было довольно простым.

В параметрах диаграммы мне нужно было использовать дату и время:

xAxis: {
          type: 'datetime',
          dateTimeLabelFormats: {
            month: '%e. %b',
            year: '%b'
          }
        }

После того, как это было на месте, мне пришлось отформатировать свои даты (был отформатирован в mysql, поэтому ГГГГ-ММ-ДД/ГГГГ-WW). Моим самым большим препятствием здесь было то, что данные были 1) динамическими из конечной точки API 2) разные точки данных (неделя против дней)

Поскольку я мог контролировать конечную точку API, я мог вносить изменения в даты, чтобы избежать потери производительности на стороне клиента. Данные должны быть в метке времени w/ms, и для этого я использовал momentjs. Пример ниже для недель:

let d = moment(i.date, 'YYYY-WW').format('YYYY-MM-DD')
let dateFormat = new Date(d);
let date = moment(d).day(parseInt(goToDay)).format('YYYY-MM-DD').split('-')
let utcDate = Date.UTC(parseInt(date[0]), parseInt(date[1]) - 1, parseInt(date[2]))

Дни были легче:

  let date = i.date.split('-');
  let utcDate = Date.UTC(date[0], date[1] - 1, date[2])

После этого нужно было только отправить данные обратно клиенту и зациклить их так (обратите внимание, что я использую angular, процедура для highcharts без angular будет немного другой):

$scope.ChartConfig.series = [];
$scope.ChartConfig.series.push({
  name: 'Daily',
  title: 'Daily',
  data: data.daily.data
})
$scope.ChartConfig.series.push({
  name: 'Weekly',
  title: 'Weekly',
  data: data.weekly.data
});

Это идеально отображает диаграммы и именно так, как я хочу: justthewayIwantit

person yusijs    schedule 26.08.2016