带有'datetime'的高图表xAxis - 在深入分析中使用类别 [英] Highcharts chart with 'datetime' xAxis - use categories on drilldown

问题描述

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

在这个jsfiddle示例中（ http：// jsfiddle。 net / kadams / 3e3xqv7e / ），您可以看到当'category'用作xAxis类型时，深入数据正确使用钻取系列名称'A'，'B'和'C' x轴。但是，如果将xAxis类型更改为datetime，并且毫秒时间用于替代主系列名称的x值，则深入分类中的类别不会显示A，B '或'C'了。只是无意义的日期。

澄清更新 - 我宁愿使用'datetime'类型而不是'category'类型，其值格式为日期，因为当x轴很大时，Highcharts会抛出'太多滴答声'的错误： http：// www.highcharts.com/errors/19 。我在下面的小提琴中给出了'category'类型的例子，仅仅是为了说明当类型不是'datetime'时'A'，'B'，'C'显示正确。

  $（function（）{
 $（'＃container'）。highcharts（{
图：{
 type：'column' ，
}，
 xAxis：{
类型：'category'，
 //类型：'datetime'，
 dateTimeLabelFormats：{
小时：' ％l：％M％p'
} 
}，
图例：{
启用：false 
}，
系列：[{
名称：'Total'，
 colorByPoint：true，
 data：[{
y：8，
 drilldown：'Bob'，
名称：'Bob'， //与'category'一起使用xAxis类型
x：1420700400000 //与'datetime'xAxis类型
}] 
}]一起使用， 
钻取：{
系列：[{
 id：'Bob'，
名称：'Bob'，
 data：[{
 name：' A'，
y：3 
}，{
名称：'B'，
y：3 
}，{
名称：'C'，
y：2 
}] 
}] 
} 
}）; 
}）; 
  

解决方案

塞巴斯蒂安Bochan给了我一些想法。您需要分离xAxis并为每个类型设置不同的类型。因此，您必须将您的类别添加为 Highcharts方式。

  xAxis：[{
 id：0，
 type：'datetime'
}，
 { 
 id：1，
类型：'categories'，
 categories：data.categories 
} 
] 
  pre> 
 
 
然后，您必须在您的系列中添加此代码以将其与新的Axis链接。
 
 
 <$ p $ 钻取：{
系列：[{
名称：test，
 id：test，
 xAxis：1，//< ; ---你想要的X轴ID 
数据：[
 [你的数据] 
] 
}] 
} 
  

可能您会在底部图表上看到一个小小的差异，但所有这些都适用于我。

我希望它能帮助你;）

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?

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.

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'.

$(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
                }]
            }]
        }
    });
});

解决方案

I have found a solution for you problem men! 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 way's.

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 it helps you ;)

这篇关于带有'datetime'的高图表xAxis - 在深入分析中使用类别的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！