javascript - 将总列添加到 Highcharts 列范围

Question

我正在使用 Highcharts 构建一个图表，员工可以在其中查看给定一周的日程安排。理想情况下，我希望有一个总计列，显示给定日期安排和工作的总小时数。

最初我在图表旁边建了一个表，目的是跟踪那里的总数，但是动态 Highcharts 很难保持行对齐。

这里是一个链接 JSFiddle使用我尝试过的精简版。如果您单击 pto 图例按钮，您可以看到 Highcharts 动态变化，这就是为什么在图表旁边放一个表格效果不佳的原因。

我认为使用 stackLabels 属性可能适用于我想做的事情，但我无法让它发挥作用。

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

我已经能够将总比较添加到图例中作为 this question描述，但将总计与数据条放在同一行会更清楚。

本质上我想要的是以下内容。

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

---

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

---

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

---

非常感谢您的帮助!你是最棒的!

Answer 1

如果您为 xAxis 设置最小值和最大值，您可以像之前那样使用单独的表格来实现总计。这可以防止 Highcharts 在其中一个行没有数据时调整行的大小。

JSFiddle

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