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函数不直接返回数组的引用，而是返回数组的副本。我仍然想知道为什么我们需要首先使用切片功能，对于这种特殊情况，但它可以工作。

highcharts中的series.data问题

2 个答案: