Highcharts钻取并结合图表类型 [英] Highcharts drilldown and combining chart type

问题描述

我想在我的深入图表（在子图表中）列和样条线上混合，如下所示：
https://jsfiddle.net/lostrailler/Ljotp059/

但是当我尝试的时候，我没有同时使用过两个。这是我的代码：

  var chart = new Highcharts.Chart（{
图表：{
 renderTo ：'容器'，
类型：'列'
}，
标题：{
 text：'评分标准'
}，
 xAxis： {
 type：'category'，
 labels：{
 rotation：-45，
 align：'right'，
 style：{
 fontFamily： 'Verdana，sans-serif'
} 
}，
分钟：0 
}，
 y轴心：{
 title：{
 text ：'分数'
}，
最多：100，
 tickInterval：10，
分钟：0 
}，
图例：{
启用：false 
}，
 plotOptions：{
系列：{
 borderWidth：0，
 dataLabels：{
启用：true 
} 
} 
}，
导出ing：{
 enabled：true 
}，
 tooltip：{
 formatter：function（）{
 if（this.point.drilldown）{
 var s = this.key +'：< b>'+ this.y +'％< / b>'; 
} else {
 var s = this.key +'：< b>'+ this.y +'< / b>'; 
} 
 return s; 
 
}，
系列：[{
 name：'Marches'，
 colorByPoint：true，
 data：[
 {
 name：'Step 1'，
y：89，
 drilldown：'step1'
}，
 {
 name：'Step 2'，
y：17，
 drilldown：'step2'
}] 
}]，
 drilldown：{
 drillUpButton：{
 relativeTo：'spacingBox' ，
位置：{
y：0，
x：-50 
} 
}，
系列：[
 {
 id ：'step1'，
 name：'Step 1'，
 type：'column'，
 data：[['Game 1'，100]，['Game 2'，100] ，['Game 3'，100]] 
}，
 {
 id：'step2' ，
 name：'Step 2'，
 type：'column'，
 data：[['Game 1'，0]，['Game 2'，100]，['Game 3'，0]] 
}，
 {
 id：'step1'，
 name：'Step 1'，
 type：'spline'，
 data：[['Game 1'，83]，['Game 2'，82]，['Game 3'，79]] 
}，
 {
 id：'步骤2'，
名称：'步骤2'，
类型：'spline'，
 data：[['Game 1'，0]，['Game 2'，100] 'Game 3'，0]] 
}] 
} 
}）; 
  

JsFiddle： https://jsfiddle.net/lostrailler/fe1zzwph/

任何想法？

$ p

解决方案

您可以使用钻取事件回调函数来添加新钻石系列：
http://api.highcharts.com/highcharts#chart.events.drilldown

 钻取：函数（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/12/

亲切的问候。

I would like to mix on my drilldown chart (in the children chart) column and spline like here : https://jsfiddle.net/lostrailler/Ljotp059/

But when I'm trying, I haven't both at same time. Here is my code :

var chart = new Highcharts.Chart({
        chart: {
        renderTo: 'container',
        type: 'column'
    },
    title: {
        text: 'Scores par paliers'
    },
    xAxis: {
        type: 'category',
        labels: {
            rotation: -45,
            align: 'right',
            style: {
                fontFamily: 'Verdana, sans-serif'
            }
        },
        min: 0
    },
    yAxis: {
        title: {
            text: 'Score'
        },
        max: 100,
        tickInterval: 10,
        min: 0
    },
    legend: {
        enabled: false
    },
    plotOptions: {
        series: {
            borderWidth: 0,
            dataLabels: {
                enabled: true
            }
        }
    },
    exporting: {
        enabled: true
    },
    tooltip: {
        formatter: function() {
            if (this.point.drilldown) {
                var s = this.key +' : <b>'+ this.y +' %</b>';
            } else {
                var s = this.key +' : <b>'+ this.y + '</b>';
            }
            return s;
        }
    },
    series: [{
            name: 'Marches',
        colorByPoint: true,
        data: [
            {
                name: 'Step 1',
                y: 89,
                drilldown: 'step1'
            },
            {
                name: 'Step 2',
                y: 17,
                drilldown: 'step2'
            }]
    }],
    drilldown: {
        drillUpButton: {
            relativeTo: 'spacingBox',
            position: {
                y: 0,
                x: -50
            }
        },
        series: [
            {
                id: 'step1',
                name: 'Step 1',
                type: 'column',
                data: [['Game 1', 100],['Game 2', 100],['Game 3', 100]]
            },
            {
                id: 'step2',
                name: 'Step 2',
                type: 'column',
                data: [['Game 1', 0],['Game 2', 100],['Game 3', 0]]
            },
            {
                id: 'step1',
                name: 'Step 1',
                type: 'spline',
                data: [['Game 1', 83],['Game 2', 82],['Game 3', 79]]
            },
            {
                id: 'step2',
                name: 'Step 2',
                type: 'spline',
                data: [['Game 1', 0],['Game 2', 100],['Game 3', 0]]
            }]
    }
});

JsFiddle : https://jsfiddle.net/lostrailler/fe1zzwph/

Any ideas ?

Thanks a lot.

解决方案

You can use drilldown event callback function for add new series as your drilldown: http://api.highcharts.com/highcharts#chart.events.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/12/

Kind regards.

这篇关于Highcharts钻取并结合图表类型的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！