对同时多个系列和y轴进行深度图挖掘 [英] Highchart drilldown to simultaneous multiple series and y-axis
问题描述
你好，我想使用HighChart软件包，并制作具有钻取功能的JS数字，即
1.同时显示多个钻取级别的钻石系列。
2。使用多个（例如2个）y轴来指示钻取级别的这些系列中的不同单位。
根据代码的起点：
$（function（）{
//创建图表
$（'＃container'）。highcharts （{
图表：{
类型：'列'
}，
标题：{
text：'浏览器市场份额2015年1月至2015年5月'来源：< a href =http://netmarketshare.com> netmarketshare.com< / b $ b $，
subtitle：{
text：'点击列查看版本。 a> ;.'
}，
xAxis：{
type：'category'
}，
yAxis：{
title：{
文本：'总市场份额百分比'
}
}，
le gend：{
启用：false
}，
plotOptions：{
系列：{
borderWidth：0，
dataLabels：{
启用：true，
格式：'{point.y：.1f}％'
}
}
}，
工具提示：{
headerFormat：'< span style =font-size：11px> {series.name}< / span>< br>'，
pointFormat：'< span style =color：{ point.color}> {point.name}< / span>：< b> {point.y：.2f}％< / b>总计< br />'
}，
系列：[{
name：'Brands'，
colorByPoint：true，
data： [{
name：'Microsoft Internet Explorer'，
y：56.33，
drilldown：'Microsoft Internet Explorer'
}，{
name：'Chrome'，
y：24.03，
drilldown：'Chrome'
}，{
name：'Firefox'，
y：10.38，
drilldown：'Firefox'$ b b $ b}，{
name：'Safari'，
y：4.77，
drilldown：'Safari'
}，{
name：'Opera'，
y：0.91，
drilldown：'Opera'
}，{
name：'Proprietary or Undetectable'，
y：0.2，
drilldown：null
}]
}]，
钻取：{
系列：[{
名称：'Microsoft Internet Explorer'，
id：'Microsoft Internet Explorer'，
categories：['v11'，'v8'，'v9'，'v10'，'v7']，
type：'spline'，
data：[
['v11'，25]，
['v8'，17]，
['v9'，8] ，
['v10'，5]，
['v7'，3]]
}，{
名称：'Chrome'，
id：'Chrome '，
data：[
['v40.0'，5]，
['v41.0'，4.32]，
['v42.0'，3.68]
]
}]
}
}）;
}）;
http://jsfiddle.net/h5xjp8h5/2/ 带有三个js源代码的
< script src =https://code.highcharts.com/highcharts.js>< / script>
< script src =https://code.highcharts.com/modules/data.js>< / script>
< script src =https://code.highcharts.com/modules/drilldown.js>< / script>
但是，当我制作深入部分代码如下所示：
钻取：{
series：[{
name：'Microsoft Internet Explorer'，
id：'Microsoft Internet Explorer'，
type：'spline'，
data：[
['v11'，25]，
['v8'，17]，
['v9'， 8]，
['v10'，5]，
['v7'，3]]
}，{
名称：'Microsoft Internet Explorer Cost'，
id：'Microsoft Internet Explorer'，
类型：'spline'，
yAxis：1，
data：[
['v11'，50]，
['v8'，40]，
['v9'60]，
['v10'，65]，
['v7'，73]]
}，{
名称：'Chrome '，
id：'Chrome'，
data：[
['v40.0'，5]，
['v41.0'，4.32]，
['v42.0'，3.68]
]
}]
}
使用y轴部分：
yAxis：[{
title：{
文本：'总市场份额百分比'
}
}，
{
标题：{
text：'cost'
}，
相反：真
}]，
http://jsfiddle.net/h5xjp8h5/3/
没有工作。
有人可以帮我解决这个问题：
1）我想在Microsoft Internet Explore上钻取两个样条系列的视图，版本使用，另一种版本费用
2）我想要这两个系列。
3）使用t
非常感谢您的提前。
p>您可以使用钻取事件回调函数来添加新钻石系列作为钻取：
钻取：函数（e）{
var chart = this，
drilldowns = chart.userOptions.drilldown.series，
series = [];
e.preventDefault（）;
Highcharts.each（drilldowns，function（p，i）{
if（p.id.includes（e.point.name））{
chart.addSingleSeriesAsDrilldown（e.point，p ）;
}
}）;
chart.applyDrilldown（）;您可以使用addSingleSeriesAsDrilldown（）方法，类似于：
$ / code> http://api.highcharts.com/highcharts#Chart.addSeriesAsDrilldownrel =nofollow> http://api.highcharts.com/highcharts#Chart.addSeriesAsDrilldown
但是，您可以使用此方法将多个系列添加为向下钻取。
在这里你可以看到一个例子，它是如何工作的：
http://jsfiddle.net/h5xjp8h5/10/
亲切的问候。
Hello I would like to use HighChart package and make JS figures with drilldown capability that
1. Show multiple series at drilled-down level at the same time.
2. Use multiple (say 2) y-axis to indicate the different units from these series at the drilled-down level.
Based on the starting point of the code:
$(function () {
// Create the chart
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Browser market shares. January, 2015 to May, 2015'
},
subtitle: {
text: 'Click the columns to view versions. Source: <a href="http://netmarketshare.com">netmarketshare.com</a>.'
},
xAxis: {
type: 'category'
},
yAxis: {
title: {
text: 'Total percent market share'
}
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
format: '{point.y:.1f}%'
}
}
},
tooltip: {
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'
},
series: [{
name: 'Brands',
colorByPoint: true,
data: [{
name: 'Microsoft Internet Explorer',
y: 56.33,
drilldown: 'Microsoft Internet Explorer'
}, {
name: 'Chrome',
y: 24.03,
drilldown: 'Chrome'
}, {
name: 'Firefox',
y: 10.38,
drilldown: 'Firefox'
}, {
name: 'Safari',
y: 4.77,
drilldown: 'Safari'
}, {
name: 'Opera',
y: 0.91,
drilldown: 'Opera'
}, {
name: 'Proprietary or Undetectable',
y: 0.2,
drilldown: null
}]
}],
drilldown: {
series: [{
name: 'Microsoft Internet Explorer',
id: 'Microsoft Internet Explorer',
categories: ['v11','v8','v9','v10','v7'],
type: 'spline',
data: [
['v11',25],
['v8',17],
['v9',8],
['v10',5],
['v7',3]]
}, {
name: 'Chrome',
id: 'Chrome',
data: [
['v40.0',5],
['v41.0',4.32],
['v42.0',3.68]
]
}]
}
});
});
http://jsfiddle.net/h5xjp8h5/2/
with three js source code:
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/drilldown.js"></script>
But when i make the drilldown part code like the following:
drilldown: {
series: [{
name: 'Microsoft Internet Explorer',
id: 'Microsoft Internet Explorer',
type: 'spline',
data: [
['v11',25],
['v8',17],
['v9',8],
['v10',5],
['v7',3]]
}, {
name: 'Microsoft Internet Explorer Cost',
id: 'Microsoft Internet Explorer',
type: 'spline',
yAxis: 1,
data: [
['v11',50],
['v8',40],
['v9'60],
['v10',65],
['v7',73]]
}, {
name: 'Chrome',
id: 'Chrome',
data: [
['v40.0',5],
['v41.0',4.32],
['v42.0',3.68]
]
}]
}
With y-axis part:
yAxis: [{
title: {
text: 'Total percent market share'
}
},
{
title: {
text: 'cost'
},
opposite: true
}],
http://jsfiddle.net/h5xjp8h5/3/
It did not work.
Could someone please help me on this:
1) I want drill down on Microsoft Internet Explore into a view with two spline series, one with version usage and the other with version cost.
2) i want those two series in.
3) using two y-axis.
Thank you very much in advance.
You can use drilldown event callback function for add new series as your drilldown:
drilldown: function(e) {
var chart = this,
drilldowns = chart.userOptions.drilldown.series,
series = [];
e.preventDefault();
Highcharts.each(drilldowns, function(p, i) {
if (p.id.includes(e.point.name)) {
chart.addSingleSeriesAsDrilldown(e.point, p);
}
});
chart.applyDrilldown();
}
You can use addSingleSeriesAsDrilldown(), method similar to: http://api.highcharts.com/highcharts#Chart.addSeriesAsDrilldown
But you can add multiple series as drilldown with this method.
Here you can see an example how it can work:
http://jsfiddle.net/h5xjp8h5/10/
Kind regards.
这篇关于对同时多个系列和y轴进行深度图挖掘的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
