3D-Highchart动态系列添加问题

时间:2015-06-22 13:04:20

标签: javascript jquery angularjs highcharts

我正在学习3d-highchars,我在动态添加系列时遇到小问题。

系列没有正确加载,即第二个“stack:1”正在加载“stack:0”位置。

我在下面添加了代码段代码检查,让我知道这个问题。 [单击“单击我”按钮生成图表]

提前致谢!!

var chart;

$(function () {
    // Set up the chart
    chart = new Highcharts.Chart({
        
        chart: {
                    renderTo: 'container', type: 'column',
                    options3d: { enabled: true, alpha: 25, beta: 25, viewDistance: 25, depth: 40 },
                    marginTop: 80, marginRight: 40
                },
                plotOptions: { column: { depth: 40, stacking: true, grouping: false } },
        series: []
    });
    
    $('#clickMe').on('click', function () {
        var odata=[{data: [1,5,3,6,2],stack: 0},
                {data: [7,7,9,8,6],stack: 1}];
        
        $.each(odata, function (itemNo, item) {
                chart.addSeries({
                    data: item.data,
                    stack: item.stack
                }, false);
        });
        chart.redraw();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-3d.js"></script>
<button id="clickMe">Click Me</button>
<div id="container"></div>

1 个答案:

答案 0 :(得分:1)

根据documentation记住 You will need at least the following depth: number of columns * (depth of column + z-padding)。这是一个更新的fiddle,可以通过增加depth来解决您的问题,您可以根据onClick函数对其进行修改!

 chart: {
            type: 'column',
            margin: 75,
            options3d: {
                enabled: true,
                alpha: 25,
                beta: 25,
                viewDistance: 25,
                depth: 110
            }
        },
        plotOptions: {
            column: {
                depth: 40,
                stacking: true,
                grouping: false,
                groupZPadding: 10
            }
        }