带有 'datetime' xAxis 的 Highcharts 图表 - 在向下钻取时使用类别
Highcharts chart with 'datetime' xAxis - use categories on drilldown
有没有办法在主系列上为 xAxis 类型设置 'datetime',但是当单击一个系列时,向下钻取是否使用当时的类别?
在这个 jsfiddle 示例 (http://jsfiddle.net/kadams/3e3xqv7e/) 中,您可以看到当 'category' 用作 xAxis 类型时,向下钻取数据正确使用向下钻取系列名称 [= x 轴上的 14=]、'B' 和 'C'。但是当 xAxis 类型更改为 'datetime',并且毫秒时间用于 'x' 值代替主要系列的名称时,向下钻取的类别不显示 [= 14=、'B' 或 'C'。只是毫无意义的日期。
更新澄清 - 我更愿意使用 'datetime' 类型而不是 'category' 类型,值格式为日期,因为 Highcharts 会抛出'too many ticks' x 轴较大时的错误:http://www.highcharts.com/errors/19。我在下面的 fiddle 中给出了 'category' 类型示例,只是为了证明当类型不是 [=12] 时 '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
}]
}]
}
});
});
您需要将此添加到您的 xAxis
:
labels: {
formatter: function() {
return Highcharts.dateFormat('%a %d %b', this.value);
}
},
查看 fiddle。
我已经找到了解决您问题的方法! Sebastian Bochan 给了我一些想法。您需要分离 xAxis 并为每个设置不同的类型。所以,在这里你必须添加你的类别 Highcharts's way.
xAxis: [{
id: 0,
type: 'datetime'
},
{
id: 1,
type: 'categories',
categories: data.categories
}
]
然后你必须在你的系列中添加这段代码到 link 它与你的新轴。
drilldown: {
series: [{
name: "test",
id: "test",
xAxis: 1, // <--- your desired X axis ID
data: [
[your data]
]
}]
}
您可能会在底部图表上看到细微的差别,但对我来说都适用。
希望对你有所帮助;)
有没有办法在主系列上为 xAxis 类型设置 'datetime',但是当单击一个系列时,向下钻取是否使用当时的类别?
在这个 jsfiddle 示例 (http://jsfiddle.net/kadams/3e3xqv7e/) 中,您可以看到当 'category' 用作 xAxis 类型时,向下钻取数据正确使用向下钻取系列名称 [= x 轴上的 14=]、'B' 和 'C'。但是当 xAxis 类型更改为 'datetime',并且毫秒时间用于 'x' 值代替主要系列的名称时,向下钻取的类别不显示 [= 14=、'B' 或 'C'。只是毫无意义的日期。
更新澄清 - 我更愿意使用 'datetime' 类型而不是 'category' 类型,值格式为日期,因为 Highcharts 会抛出'too many ticks' x 轴较大时的错误:http://www.highcharts.com/errors/19。我在下面的 fiddle 中给出了 'category' 类型示例,只是为了证明当类型不是 [=12] 时 '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
}]
}]
}
});
});
您需要将此添加到您的 xAxis
:
labels: {
formatter: function() {
return Highcharts.dateFormat('%a %d %b', this.value);
}
},
查看 fiddle。
我已经找到了解决您问题的方法! Sebastian Bochan 给了我一些想法。您需要分离 xAxis 并为每个设置不同的类型。所以,在这里你必须添加你的类别 Highcharts's way.
xAxis: [{
id: 0,
type: 'datetime'
},
{
id: 1,
type: 'categories',
categories: data.categories
}
]
然后你必须在你的系列中添加这段代码到 link 它与你的新轴。
drilldown: {
series: [{
name: "test",
id: "test",
xAxis: 1, // <--- your desired X axis ID
data: [
[your data]
]
}]
}
您可能会在底部图表上看到细微的差别,但对我来说都适用。
希望对你有所帮助;)