带有“日期时间”x轴的图表 - 在向下钻取时使用类别

Highcharts chart with 'datetime' xAxis - use categories on drilldown

本文关键字：钻取 日期时间 时间 日期 带有      更新时间：2023-09-26

有没有办法在主系列上为 xAxis 类型设置"日期时间"，但是当单击系列时，让明细使用该时间的类别？

在此 jsfiddle 示例 （http://jsfiddle.net/kadams/3e3xqv7e/） 中，您可以看到，当将"类别"用作 xAxis 类型时，向下钻取数据正确使用 xAxis 上的向下钻取系列名称"A"、"B"和"C"。 但是，当 xAxis 类型更改为"日期时间"，并且毫秒时间用于"x"值代替主系列的名称时，向下钻取的类别不再显示"A"、"B"或"C"。 只是毫无意义的约会。

更新澄清 - 我更喜欢使用"日期时间"类型而不是格式化为日期的值的"类别"类型，因为当 x 轴很大时，Highcharts 会抛出"太多刻度"错误：http://www.highcharts.com/errors/19。 我在下面的小提琴中给出"类别"类型示例只是为了证明当类型不是"日期时间"时，"A"，"B"，"C"确实正确显示。

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'column',
        },
        xAxis: {
            type: 'category',
            //  type: 'datetime',
            dateTimeLabelFormats: {
                hour: '%l:%M %p'
            }
        },
        legend: {
            enabled: false
        },
        series: [{
            name: 'Total',
            colorByPoint: true,
            data: [{
                y: 8,
                drilldown: 'Bob',
                name: 'Bob', //used with 'category' xAxis type
                x: 1420700400000 //used with 'datetime' xAxis type
            }]
        }],
        drilldown: {
            series: [{
                id: 'Bob',
                name: 'Bob',
                data: [{
                    name: 'A',
                    y: 3
                }, {
                    name: 'B',
                    y: 3
                }, {
                    name: 'C',
                    y: 2
                }]
            }]
        }
    });
});

我已经找到了解决您问题的方法！Sebastian Bochan给了我一些想法。您需要分离 xAxis 并为每个轴设置不同的类型。因此，在这里您必须将类别添加为Highcharts的方式。

xAxis: [{
         id: 0,
         type: 'datetime'
       },
       {
         id: 1,
         type: 'categories',
         categories: data.categories
       }
   ]

然后，您必须在系列中添加此代码以将其与新轴链接。

drilldown: {
      series: [{
        name: "test",
        id: "test",
        xAxis: 1, // <--- your desired X axis ID
        data: [
          [your data]
        ]
      }]
    }

也许您会在底部图表上看到很小的差异，但一切都对我有用。

我希望这对你有所帮助;)

您需要

将其添加到您的xAxis：

labels: {
        formatter: function() {
              return Highcharts.dateFormat('%a %d %b', this.value);
         }
},

看看小提琴。

相关文章：