Highcharts：带有向下钻取的堆叠列

Lorenzo
2013-04-06  
7497  
    
2  

我正在尝试使用向下钻取实现堆叠列，但我认为有一个错误，当我单击并返回原始图表时，列更改为“透明”，或者我做错了什么？

这是js：

http://jsfiddle.net/NULTY/410/

我正在使用 3 个类别：

var chart;
$(document).ready(function() {
   var colors = Highcharts.getOptions().colors,
      categories = ['MSIE', 'Firefox','chrome'],
charts ,  highcharts ,  highstock
stack overflow Highcharts: Stacked column with Drilldown
原文答案

答案:

作者头像
mcrrnz
2014-04-11    1      原文

take a look to this code, think it can help you.

http://jsfiddle.net/NULTY/753/

var chart;
$(document).ready(function() {

   var colors = Highcharts.getOptions().colors,
      categories = ['MSIE', 'Firefox', 'Chrome', 'Safari', 'Opera'],
      name = 'Browser brands',
      level = 0,
      data = [{ 
            y: 55.11,
            color: colors[0],
            drilldown: {
                type: 'pie',
               name: 'MSIE versions',
               categories: ['MSIE 8.0', 'MSIE 6.0', 'MSIE 7.0', 'MSIE 9.0'],
               level: 1, 
               data: [11,10.85, 7.35, 2.41],
               color: colors[0]
            }
         }, {
             y: 21.63,
            color: colors[1],
            drilldown: {
                type: 'pie',
               name: 'Firefox versions',
               categories: ['Firefox 3.6', 'Firefox 4.0', 'Firefox 3.5', 'Firefox 3.0', 'Firefox 2.0'],
               data: [13.52, 5.43, 1.58, 0.83, 0.20],
               color: colors[1]
            }
         }, {
            y: 11.94,
            color: colors[2],
            drilldown: {
                type: 'pie',
               name: 'Chrome versions',
               categories: ['Chrome 10.0', 'Chrome 11.0', 'Chrome 8.0', 'Chrome 9.0', 'Chrome 12.0', 
                  'Chrome 6.0', 'Chrome 5.0', 'Chrome 7.0'],
               data: [9.91, 0.50, 0.36, 0.32, 0.22, 0.19, 0.12, 0.12],
               color: colors[2]
            }
         }, {
            y: 7.15,
            color: colors[3],
            drilldown: {
                type: 'pie',
               name: 'Safari versions',
               categories: ['Safari 5.0', 'Safari 4.0', 'Safari Win 5.0', 'Safari 4.1', 'Safari/Maxthon', 
                  'Safari 3.1', 'Safari 41'],
               data: [4.55, 1.42, 0.23, 0.21, 0.20, 0.19, 0.14],
               color: colors[3]
            }
         }, {
            y: 2.14,
            color: colors[4],
            drilldown: {
                type: 'pie',
               name: 'Opera versions',
               categories: ['Opera 11.x', 'Opera 10.x', 'Opera 9.x'],
               data: [1.65, 0.37, 0.12],
               color: colors[4]
            }
         }],

      data2 = [{
             y: 21.63,
            color: colors[1],
            drilldown: {
               name: 'Firefox versions',
               categories: ['Firefox 3.6', 'Firefox 4.0', 'Firefox 3.5', 'Firefox 3.0', 'Firefox 2.0'],
               data: [13.52, 5.43, 1.58, 0.83, 0.20],
               color: colors[1]
            }
         }, {
            y: 11.94,
            color: colors[2],
            drilldown: {
               name: 'Chrome versions',
               categories: ['Chrome 10.0', 'Chrome 11.0', 'Chrome 8.0', 'Chrome 9.0', 'Chrome 12.0', 
                  'Chrome 6.0', 'Chrome 5.0', 'Chrome 7.0'],
               data: [9.91, 0.50, 0.36, 0.32, 0.22, 0.19, 0.12, 0.12],
               color: colors[2]
            }
         }, {
            y: 7.15,
            color: colors[3],
            drilldown: {
               name: 'Safari versions',
               categories: ['Safari 5.0', 'Safari 4.0', 'Safari Win 5.0', 'Safari 4.1', 'Safari/Maxthon', 
                  'Safari 3.1', 'Safari 41'],
               data: [4.55, 1.42, 0.23, 0.21, 0.20, 0.19, 0.14],
               color: colors[3]
            }
         }, {
            y: 2.14,
            color: colors[4],
            drilldown: {
               name: 'Opera versions',
               categories: ['Opera 11.x', 'Opera 10.x', 'Opera 9.x'],
               data: [1.65, 0.37, 0.12],
               color: colors[4]
            }
         },{ 
            y: 55.11,
            color: colors[0],
            drilldown: {
                type: 'column',
               name: 'MSIE versions',
               categories: ['MSIE 8.0', 'MSIE 6.0', 'MSIE 7.0', 'MSIE 9.0'],
               level: 1, 
               data: [11,10.85, 7.35, 2.41],
               color: colors[0]
            }
         }];

   function setChart(name, categories, data, color, level, type) {
      chart.xAxis[0].setCategories(categories);
       var dataLen = data.length;

       chart.series[0].remove();
       if(dataLen === 1){
           chart.series[0].remove();
       }        
       for(var i = 0; i< dataLen; i++){
      chart.addSeries({
          type: type,
         name: name,
         data: data[i],
         level: level,
         color: color || 'white'
      });
   }
   }

   chart = new Highcharts.Chart({
      chart: {
         renderTo: 'container', 
         type: 'column'
      },
      title: {
         text: 'Browser market share, April, 2011'
      },
      subtitle: {
         text: 'Click the columns to view versions. Click again to view brands.'
      },
      xAxis: {
         categories: categories                     
      },
      yAxis: {
         title: {
            text: 'Total percent market share'
         }
      },
      plotOptions: {
         column: {
             stacking: 'normal',
            cursor: 'pointer',
            point: {
               events: {
                  click: function() {

                     var drilldown = this.drilldown;
                     if (drilldown) { // drill down

                         this.series.chart.setTitle({
                             text: drilldown.name
                         });

                         setChart(drilldown.name, drilldown.categories, [drilldown.data], drilldown.color, drilldown.level, drilldown.type);
                     } else { // restore
                        setChart(name, categories, [data,data2], null, level, 'column');
                     }
                  }
               }
            },
            dataLabels: {
               enabled: true,
               color: colors[0],
               style: {
                  fontWeight: 'bold'
               },
               formatter: function() {
                  return this.y +'%';
               }
            }               
         },
          pie: {
            cursor: 'pointer',
            point: {
               events: {
                  click: function() {

                     var drilldown = this.drilldown;
                     if (drilldown) { // drill down

                         this.series.chart.setTitle({
                             text: drilldown.name
                         });

                         setChart(drilldown.name, drilldown.categories, [drilldown.data], drilldown.color, drilldown.level, drilldown.type);
                     } else { // restore
                        setChart(name, categories, [data,data2], null, level, 'column');
                     }
                  }
               }
            },
            dataLabels: {
               enabled: true,
               color: colors[0],
               style: {
                  fontWeight: 'bold'
               },
               formatter: function() {
                  return this.y +'%';
               }
            }               
         }
      },
      tooltip: {
         formatter: function() {
            var point = this.point, s = '';

             switch (this.series.options.level) {
                case 0:
                    s = 'row 1 level 1 instructions<br/>';
                    s += ' row 2 level 1 instructions';
                    break;

                case 1:
                    s = 'row 1 level 2 instructions <br/>';
                    s += ' row 2 level 2 instructions';
                    break;

                case 2:
                    s = 'row 1 level 3 instructions<br/>';
                    s += 'row 2 level 3 instructions';
                    break;
             }


            return s;
         }
      },
      series: [{
         name: name+" 1",
         level: level,
         data: data,
         color: 'white'
      },{
         name: name,
         level: level,
         data: data2,
         color: 'white'
      }],
      exporting: {
         enabled: false
      }
   });


});
作者头像
SLimoges
2014-10-15    0      原文

I've come up with a programmatic solution for those that want the drilldown to be at the column, not the segment

HTML looks like this:

<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/modules/data.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

<pre id="tsv" style="display:none">Root Message and Root Variant    Root Variant Thumbs Up  Root      Variant No Rating Root Variant Thumbs Down
Canned A | Canned A 25.00%  45.00%  30.00%
Canned A | Canned A01   25.01%  44.99%  30.00%
Canned A | Canned A02   27.01%  42.99%  30.00%
Canned A | Canned A03   26.01%  43.99%  30.00%
Canned A | Canned A04   25.50%  42.50%  32.00%
Canned B | Canned B 41.00%  38.00%  21.00%
Canned B | Canned B01   41.01%  37.99%  21.00%
Canned B | Canned B02   38.01%  37.99%  24.00%
Canned B | Canned B03   43.01%  41.99%  15.00%
Canned C | Canned C 58.00%  36.00%  6.00%
Canned C | Canned C01   57.01%  35.99%  6.00%
Canned C | Canned C02   56.01%  35.99%  7.00%
Canned C | Canned C03   58.01%  36.99%  5.00%</pre>

The Javascript looks like this:

    var chart;
var premades = [],
    premadesTU = [],
    premadesNR = [],
    premadesTD = [],
    premadesTUData = [],
    premadesNRData = [],
    premadesTDData = [],
    versions = [],
    versionsTU = [],
    versionsNR = [],
    versionsTD = [];
var premadesCount = -1;

$(function () {       
    function setChart(categories, source) {
        chart.xAxis[0].setCategories(categories);
        chart.xAxis[0].setExtremes(0, 1);
        while(chart.series.length > 0){
            chart.series[0].remove(true);
        }
        if(source != null && source.series){
            for(var i = 0; i < source.series.length; i ++ ){
                chart.addSeries({
                    name: source.series[i].name,
                    data: source.series[i].data,
                    color: source.series[i].color || 'white',
                    tooltip: {
                        valueSuffix: ' %'
                    }
                });
            }
        } else {
            chart.addSeries({
                name: 'Thumbs Up',
                data: premadesTUData,
                color: '#87b87f',
                tooltip: { valueSuffix: ' %' }
            });                
            chart.addSeries({
                name: 'No Rating',
                data: premadesNRData,
                color: '#fee188',
                tooltip: { valueSuffix: ' %' }
            });
            chart.addSeries({
                name: 'Thumbs Down',
                data: premadesTDData,
                color: '#d15b47',
                tooltip: { valueSuffix: ' %' }
            });
        }
    }

    Highcharts.data({
        csv: document.getElementById('tsv').innerHTML,
        itemDelimiter: '\t',
        parsed: function (columns) {

            // Parse percentage strings - Thumbs Up
            columns[1] = $.map(columns[1], function (value) {
                if (value.indexOf('%') === value.length - 1) {
                    value = parseFloat(value);
                }
                return value;
            });

            // Parse percentage strings - No Rating
            columns[2] = $.map(columns[2], function (value) {
                if (value.indexOf('%') === value.length - 1) {
                    value = parseFloat(value);
                }
                return value;
            });

            // Parse percentage strings - Thumbs Down
            columns[3] = $.map(columns[3], function (value) {
                if (value.indexOf('%') === value.length - 1) {
                    value = parseFloat(value);
                }
                return value;
            });

            var previousPremade = '',
                previousValues = [ 0, 0, 0 ],
                previousCount = 0;

            $.each(columns[0], function (i, name) {
                var premade,
                    version;
                // skip header row
                if (i > 0) {
                    // Split into premade and version                   
                    premade = name.split(' | ')[0];
                    version = name.split(' | ')[1];

                    // Is it the same premade as previous row?
                    if (previousPremade === premade) {
                        previousValues[0] += columns[1][i];
                        previousValues[1] += columns[2][i];
                        previousValues[2] += columns[3][i];
                        previousCount++;
                    } else {
                        // No, different premade                        
                        if (previousPremade !== '') {
                            // add premade and values to premades array
                            var tu = Number((previousValues[0] / previousCount).toFixed(1));
                            var nr = Number((previousValues[1] / previousCount).toFixed(1));
                            var td = Number((previousValues[2] / previousCount).toFixed(1));
                            premadesTU[premadesCount].push(tu);
                            premadesNR[premadesCount].push(nr);
                            premadesTD[premadesCount].push(td);
                            // reset values
                            previousValues = [ 0, 0, 0 ];
                            previousCount = 0;
                        }
                        premadesCount++;
                        premades[premadesCount] = premade;
                        premadesTU[premadesCount] = [];
                        premadesNR[premadesCount] = [];
                        premadesTD[premadesCount] = [];
                        previousPremade = premade;
                        previousValues[0] += columns[1][i];
                        previousValues[1] += columns[2][i];
                        previousValues[2] += columns[3][i];
                        previousCount++;                            
                    }

                    // Create the version data
                    if (version !== null) {
                        if (!versions[premadesCount]) {
                            versions[premadesCount] = [];
                            versionsTU[premadesCount] = [];
                            versionsNR[premadesCount] = [];
                            versionsTD[premadesCount] = [];
                        }
                        versions[premadesCount].push(version);
                        versionsTU[premadesCount].push(columns[1][i]);
                        versionsNR[premadesCount].push(columns[2][i]);
                        versionsTD[premadesCount].push(columns[3][i]);
                    }
                }
            });
            // add the last entry
            // add premade and values to premades array
            var tu = Number((previousValues[0] / previousCount).toFixed(1));
            var nr = Number((previousValues[1] / previousCount).toFixed(1));
            var td = Number((previousValues[2] / previousCount).toFixed(1));           
            premadesTU[premadesCount].push(tu);
            premadesNR[premadesCount].push(nr);
            premadesTD[premadesCount].push(td);

            for (var i = 0; i <= premadesCount; i++) {
                premadesTUData.push({
                    name: premades[i],
                    y: premadesTU[i][0],
                    color: '#87b87f',
                    drilldown: {
                        categories: versions[i],
                        series: [{
                            name: 'Thumbs Up',
                            data: versionsTU[i],
                            color: '#87b87f',
                            tooltip: { valueSuffix: ' %' }
                        },{
                            name: 'No Rating',
                            data: versionsNR[i],
                            color: '#fee188',
                            tooltip: { valueSuffix: ' %' }
                        },{
                            name: 'Thumbs Down',
                            data: versionsTD[i],
                            color: '#d15b47',
                            tooltip: { valueSuffix: ' %' }
                        }]
                    }
                });
                premadesNRData.push({
                    name: premades[i],
                    y: premadesNR[i][0],
                    color: '#fee188',
                    drilldown: {
                        categories: versions[i],
                        series: [{
                            name: 'Thumbs Up',
                            data: versionsTU[i],
                            color: '#87b87f',
                            tooltip: { valueSuffix: ' %' }
                        },{
                            name: 'No Rating',
                            data: versionsNR[i],
                            color: '#fee188',
                            tooltip: { valueSuffix: ' %' }
                        },{
                            name: 'Thumbs Down',
                            data: versionsTD[i],
                            color: '#d15b47',
                            tooltip: { valueSuffix: ' %' }
                        }]
                    }
                });
                premadesTDData.push({
                    name: premades[i],
                    y: premadesTD[i][0],
                    color: '#d15b47',
                    drilldown: {
                        categories: versions[i],
                        series: [{
                            name: 'Thumbs Up',
                            data: versionsTU[i],
                            color: '#87b87f',
                            tooltip: { valueSuffix: ' %' }
                        },{
                            name: 'No Rating',
                            data: versionsNR[i],
                            color: '#fee188',
                            tooltip: { valueSuffix: ' %' }
                        },{
                            name: 'Thumbs Down',
                            data: versionsTD[i],
                            color: '#d15b47',
                            tooltip: { valueSuffix: ' %' }
                        }]
                    }
                });
            }

            // Create the chart
            chart = new Highcharts.Chart({
                chart: {
                    renderTo: 'container',
                    type: 'column'
                },
                title: {
                    text: 'Premade Messages - Success'
                },
                subtitle: {
                    text: 'Click the columns to view versions.'
                },
                xAxis: {
                    categories: premades,
                    min: 0,
                    max: 1
                },
                scrollbar: {
                    enabled: true
                },
                yAxis: {
                    title: {
                        text: ''
                    }
                },
                legend: {
                    enabled: false
                },
                plotOptions: {
                    column: {
                        stacking: 'normal',
                        cursor: 'pointer',
                        point: {
                            events: {
                                click: function() {
                                    var drilldown = this.drilldown;
                                    if (drilldown) { // drill down
                                        setChart(drilldown.categories, drilldown);
                                    } else { // restore
                                        setChart(premades, null);
                                    }
                                }
                            }
                        },
                        dataLabels: {
                            enabled: true,
                            color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
                            style: {
                                textShadow: '0 0 3px black, 0 0 3px black'
                            }
                        }
                    }
                },
                credits: {
                    enabled: false
                },
                tooltip: {
                    headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                    pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                        '<td style="padding:0"><b>{point.y}</b></td></tr>'
                    ,
                    footerFormat: '</table>',
                    shared: true,
                    useHTML: true
                },
                series: [{
                    name: 'Thumbs Up',
                    data: premadesTUData,
                    color: '#87b87f',
                    tooltip: {
                        valueSuffix: ' %'
                    }
                },
                {
                    name: 'Not Rated',
                    data: premadesNRData,
                    color: '#fee188',
                    tooltip: {
                        valueSuffix: ' %'
                    }
                },
                {
                    name: 'Thumbs Down',
                    data: premadesTDData,
                    color: '#d15b47',
                    tooltip: {
                        valueSuffix: ' %'
                    }
                }]
            });
        }
    });
});

You can see it working here: http://jsfiddle.net/limogesdotnet/3f6sff75/

Hope this helps.

相关问题

标签