0

深入到第二级后，我无法回到图表的原始状态。需要注意的是，当我没有生成多列（一列用于打开状态，一列用于关闭状态）时，我能够做到这一点，我很容易回到原始状态。这是我的代码：

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Team View</title>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script type="text/javascript">
$(function() {
var chart;
$(document).ready(function() {

    var colors = Highcharts.getOptions().colors,
        categories1 = ['January 2013','February 2013', 'March 2013']
        name = 'Issues',
        level = 0,
        data = [{
            y: 23,
            color: colors[0],
            drilldown: {
                type: 'column',
                name: 'Open issues for January 2013',
                categories: ['A', 'B', 'C', 'D', 'E'],
                level: 1,
                data1: [3, 2, 4, 0, 1],
                color: colors[4],

                name1:'Closed issues for January 2013',
                data2: [0, 0, 0, 0, 13],
                color1: colors[5]

            }},
        {
            y: 15,
            color: colors[1],
            drilldown: {
                type: 'column',
                name: 'Open issues for February 2013',
                categories: ['A', 'B', 'C', 'D', 'E'],
                level: 1,
                data1: [4, 0, 7, 0, 1],
                color: colors[4],

                name1:'Closed issues for February 2013',
                data2: [0, 0, 0, 0, 3],
                color1: colors[5]

            }},
        {
            y: 2,
            color: colors[2],
            drilldown: {
                type: 'column',
                name: 'Open issues for March 2013',
                categories: ['A', 'B', 'C', 'D', 'E'],
                level: 1,
                data1: [1, 0, 1, 0, 0],
                color: colors[4],

                name1: 'Closed issues for March 2013',
                data2: [0, 0, 0, 0, 0],
                color1: colors[5]

            }}];

    function setChart(name, categories, data, color, level, type) {
        console.log(name,categories,data,color,level,type);
        chart.xAxis[0].setCategories(categories);
        while(chart.series.length>0){
            chart.series[0].remove(true);
        }
        for (var i=0;i<data.length;i++){
        chart.addSeries({
            color: color[i],
            name: name[i],
            level: level,
            data: data[i],
            type: type
        });
        }
    }

    chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            type: 'line',
            backgroundColor: "#F7F7F7"
        },
        title: {
            text: null
        },
        subtitle: {
            text: null
        },
        xAxis: {
            categories: categories1,
            labels: {
                rotation: -45,
                y: 10,
                x: 10,
                align: "right"
            }
        },
        yAxis: {
            title: {
                text: 'Issues'
            },
            min: 0
        },
        credits: {
            enabled: false
        },
        plotOptions: {
            line: {
                cursor: 'pointer',
                point: {
                    events: {
                        click: function() {
                            var drilldown = this.drilldown;
                            if (drilldown) {
                                setChart([drilldown.name,drilldown.name1], drilldown.categories, [drilldown.data1,drilldown.data2], [drilldown.color,drilldown.color1], drilldown.level, drilldown.type);
                            } else { // restore
                                setChart(name, categories1, data, null, level, 'line');
                            }
                        }
                    }
                },
                dataLabels: {
                    enabled: true,
                    color: colors[0],
                    style: {
                        fontWeight: 'bold'
                    },
                    formatter: function() {
                        return this.y + 'Issues';
                    }
                }
            },
            column: {
                cursor: 'pointer',
                point: {
                    events: {
                        click: function() {
                            setChart(name, categories1, data, null, level, 'line');
                        }
                    }
                },
                dataLabels: {
                    enabled: true,
                    color: colors[0],
                    style: {
                        fontWeight: 'bold'
                    },
                    formatter: function() {
                        return this.y + 'Issues';
                    }
                }
            }
        },
        tooltip: {
            formatter: function() {
                var point = this.point,
                    s = '';
                switch (this.series.options.level) {

                case 0:
                    s = this.x + ': ' + this.y + 'Issues';
                    break;

                case 1:
                    s = this.x + ': ' + this.y + 'Issues';
                    break;
                }
                return s;
            }
        },
        series: [{
            name: name,
            level: level,
            data: data,
            color: colors[0]}],
        exporting: {
            enabled: false
        }
        },
        function(chart){
        console.log(chart);
    });
});
 });
    </script>
</head>
<body>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>

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

</body>
</html>

请让我知道我做错了什么，因为原始折线图在返回原始状态时不显示。

4

1 回答 1

1

您的代码中有两个主要错误，都在该行中：

setChart(name, categories1, data, null, level, 'line');

您应该使用任何颜色数组而不是 null ，这同样适用于数据 - 应该是一个系列数组，工作代码示例：

setChart(name, categories1, [data], colors, level, 'line');
setChart(name, categories1, [data], ['blue','red','green'], level, 'line');

工作示例：http: //jsfiddle.net/JaTjk/11/

于 2013-03-13T12:48:07.767 回答