Question

问题可能是愚蠢的，我道歉。我使用$ .each循环遍历JSON中的不同对象，并为每个我使用以下代码构建带有Highcharts的图表：

var chart = new Highcharts.Chart({
            chart: {
                renderTo: ('chart' + index),
                type: 'line',
                backgroundColor:'rgba(255, 255, 255, 0.0)', // Transparent BG
                width:190,
                height: 80,
                events:{ 
                    click: function(e){
                        drawChart('area',index);
                    }
                }
            },
            plotOptions: {
                line: {
                    marker: { enabled: false }
                }
            },
            xAxis: {
                categories: xAxis,
                labels: { enabled:false },
                lineWidth:0,
                tickWidth: 0,
                lineColor: '#FFFFFF'
            },
            yAxis: {
                title: { text: null }, // Set the text to null to disable the label
                labels: { enabled: false },
                gridLineWidth: 0
            },  
            series: [{
                data: yAxis,
                color: '#FFF'
            }]
        });

如您所见，我指定了一个“点击”事件，因为我需要激活plotArea上的点击。点击应调用另一个绘制指定图表的函数，但它不起作用:(这是drawChart（）函数。

function drawChart(ctype,index){

    var chartWidth = $("#container").width() - 50;
    var chart1 = new Highcharts.Chart({
        chart: {
            renderTo: (ctype + 'Chart'),
            backgroundColor:'rgba(255, 255, 255, 0.0)', // Transparent BG
            width: chartWidth,
            height:400,
            type: ctype
        },
        plotOptions: {
            line: {
                marker: { enabled: false }
            },
            series: {
                shadow: { color: '#CCC' },
                stickyTracking: false
            }
        },
        xAxis: {
            categories: itemsX[index]
        },  
        series: [{
            data: itemsY[index],
            type: ctype,
            color: '#CCCCCC'
        }]
    });
} // Close drawChart()

有人可以帮我理解原因吗？谢谢！

Answer 1

renderTo: (ctype + 'Chart'),显示不好（通常，它应该是标记中id容器标记的<div>。
您确定itemsX[index]和itemsY[index]是数组且非空吗？
Wat是使用type: ctype,中的series: [{data: itemsY[index],type: ctype,color: '#CCCCCC'}]？

编辑：根据我的理解可能会看到这个 - replica

Answer 2

我认为问题在于javascript中的闭包。您正在使用循环创建图表，因此事件未正确绑定，请阅读更多here

也有可能的解决方案，或尝试使用这样的东西：

$.each(array, function(index, element) { 
  (function(element) { //element or index
     var chart = ... //create chart 

  })(element)
});

Highcharts - On Click事件

2 个答案: