Question

我在报告仪表板上使用高图表（使用codigniter）。我使用它开发了很多报告。但现在我陷入了深入研究报告的困境。

在其他报告中，我曾使用chart.addSeries({});和setCategories.方法设置数据和类别

这是我创建的用于呈现图表

的示例之一

function renderChart(categories,report_data)
{
    $("#container").height(400);
    var chart = new Highcharts.Chart({
            chart: {
            renderTo: 'container',
            type: 'column'                    
            },                          
             title: {
                     text: 'Dice v/s Roll'
                    },   
         xAxis: {
                      categories: {}
                    },

             yAxis: {
                 plotLines: [{
                 value: 0,
                 width: 1,
                     color: '#808080'
            }],
            title: {
               text: 'Time',
                   margin: 30
               }
            },
            tooltip: { formatter: function () { return '<b>' + this.x + '</b>: ' + this.y + ' views'; } },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
               }],
                 series: {}
                });                 
             chart.xAxis[0].setCategories(categories);
             chart.addSeries({
            name: 'Dice v/s Roll',
            data:  report_data       
            });             
        }

这很完美。我的问题如何转换

下面是addSeries模型。

$(function () {

        var colors = Highcharts.getOptions().colors,
            categories = ['MSIE','Opera'],
            name = 'Browser brands',
            data = [{
                    y: 55.11,
                    color: colors[0],
                    drilldown: {
                        name: 'MSIE versions',
                        categories: ['MSIE 6.0', 'MSIE 7.0', 'MSIE 8.0', 'MSIE 9.0'],
                        data: [10.85, 7.35, 33.06, 2.81],
                        color: colors[0]
                    }
                },{
                    y: 2.14,
                    color: colors[4],
                    drilldown: {
                        name: 'Opera versions',
                        categories: ['Opera 9.x', 'Opera 10.x', 'Opera 11.x'],
                        data: [ 0.12, 0.37, 1.65],
                        color: colors[4]
                    }
                }];


        // Build the data arrays
        var browserData = [];
        var versionsData = [];
        for (var i = 0; i < data.length; i++) {

            // add browser data
            browserData.push({
                name: categories[i],
                y: data[i].y,
                color: data[i].color
            });

            // add version data
            for (var j = 0; j < data[i].drilldown.data.length; j++) {
                var brightness = 0.2 - (j / data[i].drilldown.data.length) / 5 ;
                versionsData.push({
                    name: data[i].drilldown.categories[j],
                    y: data[i].drilldown.data[j],
                    color: Highcharts.Color(data[i].color).brighten(brightness).get()
                });
            }
        }

是否可以将以下数据值推送到数组

{
                        y: 55.11,
                        color: colors[0],
                        drilldown: {
                            name: 'MSIE versions',
                            categories: ['MSIE 6.0', 'MSIE 7.0', 'MSIE 8.0', 'MSIE 9.0'],
                            data: [10.85, 7.35, 33.06, 2.81],
                            color: colors[0]
                        }
                    }

我将从我的PHP脚本以json格式将数据值发送到此脚本。所以我的数据值是动态的。这就是为什么我想把整个东西添加到数组中。

Answer 1

只是要清楚 - 你想要内圈和外圈的饼图，对吗？在这种情况下，您不需要使用“向下钻取格式” - 简单的系列可以很好地工作，例如：

var json1 = [{"name":"MSIE","y":55.11,"color":"#2f7ed8"},
 {"name":"Firefox","y":21.63,"color":"#0d233a"},
 {"name":"Chrome","y":11.94,"color":"#8bbc21"},
 {"name":"Safari","y":7.15,"color":"#910000"},
 {"name":"Opera","y":2.14,"color":"#1aadce"}];

var josn2 = [{"name":"MSIE 6.0","y":10.85,"color":"rgba(98,177,255,1)"},
 {"name":"MSIE 7.0","y":7.35,"color":"rgba(85,164,254,1)"},
 {"name":"MSIE 8.0","y":33.06,"color":"rgba(72,151,241,1)"},
 {"name":"MSIE 9.0","y":2.81,"color":"rgba(59,138,228,1)"},
 {"name":"Firefox 2.0","y":0.2,"color":"rgba(64,86,109,1)"},
 {"name":"Firefox 3.0","y":0.83,"color":"rgba(53,75,98,1)"},
 {"name":"Firefox 3.5","y":1.58,"color":"rgba(43,65,88,1)"},
 {"name":"Firefox 3.6","y":13.12,"color":"rgba(33,55,78,1)"},
 {"name":"Firefox 4.0","y":5.43,"color":"rgba(23,45,68,1)"},
 {"name":"Chrome 5.0","y":0.12,"color":"rgba(190,239,84,1)"},
 {"name":"Chrome 6.0","y":0.19,"color":"rgba(183,232,77,1)"},
 {"name":"Chrome 7.0","y":0.12,"color":"rgba(177,226,71,1)"},
 {"name":"Chrome 8.0","y":0.36,"color":"rgba(170,219,64,1)"},
 {"name":"Chrome 9.0","y":0.32,"color":"rgba(164,213,58,1)"},
 {"name":"Chrome 10.0","y":9.91,"color":"rgba(158,207,52,1)"},
 {"name":"Chrome 11.0","y":0.5,"color":"rgba(151,200,45,1)"},
 {"name":"Chrome 12.0","y":0.22,"color":"rgba(145,194,39,1)"},
 {"name":"Safari 5.0","y":4.55,"color":"rgba(196,51,51,1)"},
 {"name":"Safari 4.0","y":1.42,"color":"rgba(188,43,43,1)"},
 {"name":"Safari Win 5.0","y":0.23,"color":"rgba(181,36,36,1)"},
 {"name":"Safari 4.1","y":0.21,"color":"rgba(174,29,29,1)"},
 {"name":"Safari/Maxthon","y":0.2,"color":"rgba(166,21,21,1)"},
 {"name":"Safari 3.1","y":0.19,"color":"rgba(159,14,14,1)"},
 {"name":"Safari 4.1","y":0.14,"color":"rgba(152,7,7,1)"},
 {"name":"Opera 9.x","y":0.12,"color":"rgba(77,224,255,1)"},
 {"name":"Opera 10.x","y":0.37,"color":"rgba(60,207,240,1)"},
 {"name":"Opera 11.x","y":1.65,"color":"rgba(43,190,223,1)"}]

动态添加高图深度图表的系列和类别

1 个答案: