highcharts ：具有向下钻取功能的堆积柱形图

6ju8rftf  于 2022-11-10  发布在  Highcharts
关注(0)|答案(2)|浏览(164)

我试图实现一个具有钻取功能的堆叠列，但我认为有一个错误，当我单击并返回到原始图表时，列更改为“透明”，或者我做错了什么？
下面是js：
http://jsfiddle.net/NULTY/410/
我使用3个类别：

var chart;
$(document).ready(function() {
   var colors = Highcharts.getOptions().colors,
      categories = ['MSIE', 'Firefox','chrome'],
highcharts

2条答案

按热度按时间
jv4diomz

jv4diomz1#

看看这段代码，我想它能帮到你。
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
      }
   });

});
赞(0）分享  回复(0）举报  2022-11-10
tkqqtvp1

tkqqtvp12#

我为那些希望在列而不是段中进行深入查看的用户提供了一个编程解决方案
HTML看起来像这样：

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

Javascript如下所示：

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: ' %'
                    }
                }]
            });
        }
    });
});

您可以在此处看到它的工作情况：http://jsfiddle.net/limogesdotnet/3f6sff75/
希望这对你有帮助。

赞(0）分享  回复(0）举报  2022-11-10
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com