Добавление общего столбца в диапазон столбцов Highcharts

Question

Добавление общего столбца в диапазон столбцов Highcharts

1

Я использую Highcharts для построения графика, где сотрудники могут просматривать расписание на данной неделе. В идеале я хотел бы иметь общую колонку, которая показывает общее количество часов, запланированных и работающих в определенный день.

Первоначально я построил таблицу рядом с графиком с целью отслеживания общего количества данных, но с тем, как динамические highcharts трудно поддерживать выравнивание строк.

Вот ссылка на JSFiddle с уменьшенной версией того, что я так пробовал. Если вы нажмете кнопку pto legend, вы увидите динамические изменения Highcharts, поэтому таблица, расположенная рядом с графиком, работает не очень хорошо.

Я думал, что использование атрибута stackLabels может работать для того, что я хотел сделать, но я не смог заставить его работать.

yAxis: {
        min: 0,
        title: {
            text: 'Total fruit consumption'
        },
        stackLabels: {
            enabled: true,
            style: {
                fontWeight: 'bold',
                color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
            }
        }
    },

Мне удалось добавить общее сравнение с легендой, как описывает этот вопрос, но было бы намного яснее иметь итоговые значения в той же строке, что и бары данных.

По сути, я собираюсь сделать следующее.

            8am . 10am   12pm .  2pm .   4pm       Tot. Worked . Tot Schedu.

      Jan 1     -- Worked --------                     4.5            4 
                 --- Scheduled --

      Jan 2 .           -- Worked --                   3.5            4
                         --- Scheduled --

Спасибо большое за вашу помощь! Ты самый лучший!

BJax 24 окт. 2017, в 02:46

Источник

Теги:

javascript

highcharts

2 ответа

Ещё вопросы

BJax · Answer 1 · 2017-10-25T12-35-00.000Z

Вы можете достигнуть итогов с помощью отдельной таблицы, как вы делали, если вы установили Min и Max для xAxis. Это не позволяет Highcharts изменять размер строк, если у одного из них нет данных.

JSFiddle

xAxis: {
    //... other values 
    min: Date.UTC(1,1,3,0,0,0),
    max: Date.UTC(1,1,7,0,0,0),
  }

pawel_d · Answer 2 · 2017-10-26T14-13-00.000Z

Вы также можете увеличить правую границу и отобразить texts для каждой точки внутри области диаграммы. Взгляните на приведенный ниже пример.

Справочник по API:
https://api.highcharts.com/highcharts/chart.marginRight
https://api.highcharts.com/class-reference/Highcharts.SVGRenderer.html#text

Пример:
http://jsfiddle.net/haLr101e/

Хороший соус, который выглядит хорошо. Кажется, это на полпути. Он получает значения в диаграмме, но я все еще сталкиваюсь с проблемой, когда он не перемещает итоги, когда вы скрываете PTO, нажимая на легенду. В любом случае, это другой способ взглянуть на него, так что плохо поиграйтесь с ним и посмотрите, сможем ли мы получить часть отзывчивости.