带有'datetime'xAxis的Highcharts图表 - 在钻取时使用类别

Question

有没有办法在主系列上为xAxis类型设置'datetime',但是当点击一个系列时,让钻取使用那段时间的类别？

在这个jsfiddle示例(http://jsfiddle.net/kadams/3e3xqv7e/)中,您可以看到当"类别"用作xAxis类型时,向下钻取数据正确地使用了向下钻取系列名称"A","B"和xAxis上的'C'.但是当xAxis类型更改为"datetime"时,并且毫秒时间用于代替主要系列名称的"x"值,则向下钻取的类别不显示"A","B" '或'C'了.只是毫无意义的约会.

更新澄清 - 我更喜欢使用'datetime'类型而不是'category'类型,其值格式为日期,因为当x轴很大时,Highcharts会抛出'太多滴答'错误:http:// www .highcharts.com/errors/19.我在下面的小提琴中给出了'类别'类型示例,只是为了证明当类型不是'datetime'时'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
                }]
            }]
        }
    });
});

Answer 1

我找到了解决问题的男人!Sebastian Bochan给了我一些想法.您需要分离xAxis并为每个类型设置不同的类型.所以,在这里你必须将你的类别添加为Highcharts方式.

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

然后,您必须在您的系列中添加此代码,以将其与您的新Axis相关联.

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

可能你会在底部图表上看到一个小的差异,但一切都适合我.

我希望它可以帮助你;)

Answer 2

您需要将此添加到您的xAxis：

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

检查小提琴。