使用动态数据创建向下钻取图表

时间:2016-12-18 14:23:52

标签: javascript highcharts

这是动态数据的解决方案 Highcharts Column Chart Drilldown

但是我有3级钻取。这是我的代码:

var XMonths = "Jan|Feb|March".split("|");
var XStates = "Asia|America|Africa".split("|");
var XNames = "Jack|Mary|John".split("|");
var YMonths = "10|12|8".split("|").map(Number);
var YStates = "1|2|3".split("|").map(Number);
var YNames = "100|200|300".split("|").map(Number);
var chart,
    colors = Highcharts.getOptions().colors;

function setChart(name, categories, data, color) {
    chart.xAxis[0].setCategories(categories);
    chart.series[0].remove();
    chart.addSeries({
        name: name,
        data: data,
        color: color || 'white'
    });
}

 $(document).ready(function () {

    var categories = XMonths,
        data = [{
            y: YMonths[0],
            color: colors[0],
            drilldown: {
                categories: XStates,
                data : [{
                    y: YStates[0],
                    color: colors[0],
                    drilldown: {
                        categories: XNames,
                        data: YNames,
                        color: colors[0]
                    }
                },
                {
                    y: YStates[1],
                    color: colors[1],
                    drilldown: {
                        categories: XNames,
                        data: YNames,
                        color: colors[1]
                    }
                },
                {
                    y: YStates[2],
                    color: colors[2],
                    drilldown: {
                        categories: XNames,
                        data: YNames,
                        color: colors[1]
                    }
                }]
            }
        }, {
            y: YMonths[1],
            color: colors[1],
            drilldown: {
                categories: XStates,
                data: YStates,
                color: colors[1]
            }
        }, {
            y: YMonths[2],
            color: colors[2],
            drilldown: {
                categories: XStates,
                data: YStates,
                color: colors[2]
            }
        }];

 chart = new Highcharts.Chart({
        lang: {
            drillUpText: '◁ Back to {series.name}'
        },
        chart: {
            renderTo: 'visitReport',
            type: 'column'
        },
        xAxis: {
            categories: categories
        },
        yAxis: {
            title: {
                text: 'Numbers'
            }
        },
        plotOptions: {
            column: {
                cursor: 'pointer',
                point: {
                    events: {
                        click: function () {
                            var drilldown = this.drilldown;
                            if (drilldown) { // drilldown 
                                setChart(drilldown.name, drilldown.categories, drilldown.data, drilldown.color);
                            } else { // not drilldown
                                setChart(name, categories, data);
                            }
                        }
                    }
                },
                dataLabels: {
                    enabled: true,
                    color: colors[0],
                    style: {
                        fontWeight: 'bold'
                    },
                    formatter: function () {
                        return this.y;
                    }
                }
            }
        },
        tooltip: {
            formatter: function () {
                var point = this.point,
                    s = this.x + ':<b>' + this.y + '</b><br/>';
                return s;
            }
        },
        series: [{
            name: name,
            data: data,
            color: 'white'
        }],
        exporting: {
            enabled: false
        }
    });
});

}

我不知道每个月(第2级)和每个州(第3级)的下钻次数是多少 我应该如何设置“类别”数据动态?我可以创建一个通用函数来创建“类别”变量吗? 谢谢。

0 个答案:

没有答案