JavaScript : how to link categories to date in highcharts

Question

fiddle 链接:https://jsfiddle.net/jaiminsoni/38v7jfs3/12/

     current = 1246406400000;
    arrayShifts = [];
    arrayTimestampActual = [];

    for (i = 0; i < 6; i++) {
      arrayShifts[i] = current + (i * 6 * 3600 * 1000);
    }

    for (i = 0; i <= 18; i++) {
      arrayTimestampActual[i] = current + (i * 1 * 3600 * 1000);
    }


    var
      color3 = [
        [arrayShifts[0], 27, 40],

        [arrayShifts[1] - 60000, 27, 40],
        [arrayShifts[1], 30, 50],

        [arrayShifts[2] - 60000, 30, 50],
        [arrayShifts[2], 40, 60],

        [arrayShifts[3] - 60000, 40, 60],
        [arrayShifts[3], 45, 65],

        [arrayShifts[4] - 60000, 45, 65],
      ],
      color2 = [
        [arrayShifts[0], 14.3, 27],

        /* [1246492800000, 14.3, 27], */
        [arrayShifts[1] - 60000, 14.3, 27],
        [arrayShifts[1], 20, 30],

        [arrayShifts[2] - 60000, 20, 30],
        [arrayShifts[2], 28, 40],

        [arrayShifts[3] - 60000, 28, 40],
        [arrayShifts[3], 30, 45],

        [arrayShifts[4] - 60000, 30, 45],
      ],
      color1 = [
        [arrayShifts[0], 0, 14.3],

        [arrayShifts[1] - 60000, 0, 14.3],
        [arrayShifts[1], 0, 20],

        [arrayShifts[2] - 60000, 0, 20],
        [arrayShifts[2], 0, 28],

        [arrayShifts[3] - 60000, 0, 28],
        [arrayShifts[3], 0, 30],

        [arrayShifts[4] - 60000, 0, 30],

      ],
      value = [
        [arrayTimestampActual[0], 10],
        [arrayTimestampActual[1], 20],
        [arrayTimestampActual[2], 25],
        [arrayTimestampActual[3], 23.8],
        [arrayTimestampActual[4], 20],
        [arrayTimestampActual[5], 12],
        [arrayTimestampActual[6], 37],
        [arrayTimestampActual[7], 23.8],
        [arrayTimestampActual[8], 35],
        [arrayTimestampActual[9], 15],
        [arrayTimestampActual[10], 22],
        [arrayTimestampActual[11], 23.8],
        [arrayTimestampActual[12], 35],
        [arrayTimestampActual[13], 38],
        [arrayTimestampActual[14], 25],
        [arrayTimestampActual[15], 30],
        [arrayTimestampActual[16], 35],
        [arrayTimestampActual[17], 27],
        [arrayTimestampActual[18], 38]
      ];


    var chart = Highcharts.chart('container', {

      title: {
        text: ''
      },

      xAxis: [{
        type: 'datetime'
      },
      {
      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                        'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
                    opposite: true
      }],

      yAxis: {
        min: 0,

        title: {
          text: null
        }
      },

      tooltip: {
        crosshairs: true,
        shared: true,
        // valueSuffix: '°C'
      },
      chart: {
        backgroundColor: '#f4f4f4',

      },

      /*  legend: {
       }, */

      series: [{
          name: 'Value',
          data: value,
          zIndex: 1,
          marker: {
            fillColor: 'white',
            lineWidth: 2,
            lineColor: Highcharts.getOptions().colors[0]
          }
        }, {
          name: 'color1',
          data: color1,
          type: 'arearange',
          lineWidth: 0,
          //  linkedTo: ':previous',
          color: Highcharts.getOptions().colors[2],
          fillOpacity: 0.3,
          zIndex: 0,
          marker: {
            enabled: false
          }
        },
        {
          name: 'color2',
          data: color2,
          type: 'arearange',
          lineWidth: 0,
          //    linkedTo: ':previous',
          color: '#FFC200',
          fillOpacity: 0.3,
          zIndex: 0,
          marker: {
            enabled: false
          }
        },
        {
          name: 'color3',
          data: color3,
          type: 'arearange',
          lineWidth: 0,
          /*       linkedTo: ':previous', */
          color: '#f01515',
          fillOpacity: 0.3,
          zIndex: 0,
          marker: {
            enabled: false
          }
        }
      ]
    });
    var maxY = chart.yAxis[0].max;
    var color4 = [
      [arrayShifts[0], 40, maxY],

      [arrayShifts[1] - 60000, 40, maxY],
      [arrayShifts[1], 50, maxY],

      [arrayShifts[2] - 60000, 50, maxY],
      [arrayShifts[2], 60, maxY],

      [arrayShifts[3] - 60000, 60, maxY],
      [arrayShifts[3], 65, maxY],

      [arrayShifts[4] - 60000, 65, maxY],
    ];
    chart.addSeries({
      name: 'color4',
      //showInLegend: false,
      data: color4,
      type: 'arearange'
    });

chart.yAxis[0].update({
  max: maxY
});

图表有线 -> 值:每小时值
即 00:00:00、01:00:00、02:00:00 等。

它有区域范围 -> color1、color2、color3 和 color4:每 6 小时值
即 00:00:00、05:59:59、06:00:00、11:59:59、12:00:00、17:59:59 等

我正在尝试添加第二个x轴:类别:作为

00:00:00 至 05:59:59:cate_1
06:00:00 至 11:59:59 :cate_2
12:00:00 至 17:59:59 :cate_3
18:00:00 至 23:59:59:cate_4

有什么办法可以做到这一点吗？我找不到任何有关如何将类别与日期时间链接的解决方案？

Answer 1

• 使用 categories 选项添加第二个 xAxis，该选项设置有一系列类别(Cat 1、Cat 2 等，根据需要)
• 将当前所有系列设置为使用原始轴(向每个系列添加选项 xAxis: 0)
• 添加一个使用新轴 (xAxis: 1) 的新隐藏系列。您可以通过设置 showInLegend: false、marker: {enabled: false } 和 lineWidth: 0
来隐藏系列
• 新系列中的数据是任意数据(因此只需将每个点设置为零)，但系列中的项目数量需要与类别相同(因此对于 4 个类别数据:[[ 0, 0],[1, 0],[2, 0],[3, 0]] )

示例:https://jsfiddle.net/38v7jfs3/56/

我已对示例中的四个类别进行了硬编码。您的代码必须根据您的数据计算您需要的类别数量。这些类别实际上并未链接到日期时间概念，您只需确保拥有正确数量的类别(即计算出图表涵盖的总时间段中有多少个 6 小时间隔并添加那么多类别)