highcharts中的series.data問題

Question

我正在使用帶有滑塊的柱形圖，該滑塊會在調用滑動操作后重繪該圖表。 我將每個數據數組存儲在javascript對象中，並且圖表根據滑塊選項進行呈現。 為第一個滑塊選項指定初始值后，圖表將正確呈現，但是當我滑回到第一個位置時，圖表將不會呈現。 而奇怪的是，當我將初始值分配給一個單獨的變量，並且為數據選項分配了此變量時，圖表將在每個位置正確呈現。 這是代碼：

var data = {
                        "jan": [0, 10, 25, 30, 25, 10, 0,30, 25, 10, 0],
                        "feb": [0, 5, 25, 35, 30, 10, 0, 10, 25, 30, 25],
                        "mar": [0, 30, 18, 4, 18, 30, 0, 20, 30, 25, 15],
                        "apr": [0, 20, 30, 25, 15, 10, 0, 10, 15, 25, 30],
                        "may": [0, 10, 15, 25, 30, 20, 0, 35, 123, 978, 43],
                        "jun": [54, 5, 546, 77, 34, 3, 2, 567, 567, 7, 57],
                        "jul": [56, 324, 768, 578, 124, 154, 90, 150, 125, 258, 312],
                        "aug": [67, 76, 4, 76, 23, 2, 24, 10, 15, 546, 30],
                        "sep": [6, 5, 35, 123, 978, 4, 32, 10, 15, 546, 30],
                        "oct": [97, 56, 7, 567, 567, 7, 57, 10, 15, 25, 30],
                        "nov": [56, 4, 65, 25, 6, 565, 56, 10, 15, 546, 30],
                        "dec": [0, 10, 15, 546, 30, 33, 0, 10, 15, 546, 30]
                    };
var someData =  [0, 10, 25, 30, 25, 10, 0,30, 25, 10, 0];

var chart = new Highcharts.chart({
                    chart: {
                        renderTo: 'container',
                        type: 'column',
                        marginTop: 50,
                        marginLeft: 100,
                        marginBottom: 50
                    },
                    title: false,

                    exporting: {enabled: false},
                    xAxis: {
                        crosshair: true,
                        tickColor: '#7F7F7F',
                        lineColor: '#7F7F7F',
                        tickWidth: 0,
                        labels: {
                            step: 5
                        },
                        title: {
                            text: 'x-axis',
                            align: "left",
                            x: -10,
                            rotation: 0,
                            style: {
                                "font-size" : "15px"
                            }
                        }
                    },
                    yAxis: {
                        min: 0,
                        title: {
                            text: 'y-axis',
                            align: 'high',
                            rotation: 0,
                            y: -10,
                            offset: 0,
                            style: {
                                "font-size" : "15px"
                            }
                        },
                        gridLineColor: 'transparent',
                        lineColor: '#7F7F7F',
                        lineWidth: 1,
                        tickWidth: 1,
                        tickColor: '#7F7F7F',
                        gridLineWidth: 0,
                        minorGridLineWidth: 0,
                        labels: {
                            step: 2,
                            formatter: function(){
                                if(this.value > 999)
                                    return Math.round(this.value/1000) + 'k';
                                return this.value;
                            }
                        }
                    },
                    tooltip: {
                        enabled: false
                    },
                    plotOptions: {
                        column: {
                            pointPadding: 0.2,
                            borderWidth: 0
                        },
                        series: {
                            colorByPoint: true
                        }
                    },
                    series: [{
                        showInLegend: false,
                        data: someData
                    }],
                    credits: false
                });

$('#slider_bar').on("slide", function () {
                    chart.series[0].setData(data[document.getElementById('value').innerHTML]);
});

滑塊的初始位置為jan，當我滑回jan時，圖表將正確呈現。 我想知道為什么在將series.data分配為時圖表無法呈現：

data: data.jan

有什么建議么？

Answer 1

Highchart series.data需要鍵值對或類似數組的數組

[[x1,y1],[x2,y2]]

要么

{

 y: [x1,x2]
}

現在當您執行data = data.jan Highchart無法找到Y值，因為data.jan是一個簡單的數組

Answer 2

找到了解決方案：

而不是寫作

data: data.jan

寫

data: data.jan.slice()

slice函數不會直接返回數組的引用，而是會返回數組的副本。 我仍然想知道為什么對於這種特殊情況，我們首先需要使用slice函數，但是它可以工作。