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

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

提问by chevin99

Is there a way to have 'datetime' for the xAxis type on the main series, but then when a series is clicked on, have the drilldown use categories for that time?

有没有办法在主系列上为 xAxis 类型设置“日期时间”，但是当单击一个系列时，该时间的向下钻取使用类别？

In this jsfiddle example (http://jsfiddle.net/kadams/3e3xqv7e/), you can see that when 'category' is used as the xAxis type, the drilldown data correctly uses the drilldown series names 'A', 'B', and 'C' on the xAxis. But when the xAxis type is changed to 'datetime', and and the millisecond time is used for the 'x' value in place of a name for the main series, the categories on the drilldown don't show 'A', 'B', or 'C' anymore. Just meaningless dates.

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

UPDATE for clarification- I would prefer to use the 'datetime' type instead of 'category' type with values formatted as dates, because Highcharts will throw the 'too many ticks' error when the x-axis is big: http://www.highcharts.com/errors/19. I give the 'category' type example in the fiddle below simply to demonstrate that 'A', 'B', 'C' do show properly when the type is not 'datetime'.

更新澄清- 我更喜欢使用'datetime'类型而不是'category'类型的值格式化为日期，因为当x轴很大时，Highcharts会抛出'too many ticks'错误：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
                }]
            }]
        }
    });
});

回答by Ayoze

I have found a solution for your problem! Sebastian Bochan gave me some ideas. You need to separate xAxis and set a different type to each one. So, here you have to add your categories as Highcharts's way.

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

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

Then you have to add this code in your serie to link it with your new Axis.

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

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

Probably you'll see a small difference on bottom chart, but all works for me.

可能你会在底部图表上看到一个小的差异，但一切都对我有用。

I hope this help to you ;)

我希望这对你有帮助;)

回答by aus_lacy

You need to add this to your xAxis:

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

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

Check out the fiddle.

检查小提琴。