使用ajax更新高清数据

时间:2015-02-03 14:09:06

标签: javascript jquery ajax highcharts

我在jsp中有一个Highchart折线图,如下所示。

$(function () {
chart2 = new Highcharts.setOptions({
    global: {
        useUTC: false
    }
});
$('#patternContainer').highcharts({
    title: {
        text: 'Selected Pattern',
        x: -20 //center
    },
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
            'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },
    yAxis: {
        plotLines: [{
            value: 0,
            width: 1,
            color: '#808080'
        }]
    },
    tooltip: {
        valueSuffix: '°C'
    },
    legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'middle',
        borderWidth: 0
    },
    series: [{
        name: 'Tokyo',
        data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
    }]
});

});

我想在点击按钮时更改图表数据。在这里,我调用了ajax方法来更新数据。

function getPatternData(){
$.ajax({
    success: function() {
        chart2.series[0].update({
            data: [0.0, 6.9, 9.5, 14.5, 18.2, 100, 25.2, 0.5, 23.3, 18.3, 13.9, 0.6]
        });
    }
});

}

任何人都可以请指出我这里有什么问题。 这是我在jsp中调用事件的地方

<li class="list-group-item liitem" onclick="javaScript:getPatternData()"><strong>${pattern.id}:</strong>
                                        <span class="pull-right"  >${pattern.name}</span>

                                    </li>

1 个答案:

答案 0 :(得分:1)

删除HTML中的onclick()属性,并在JQuery脚本中将其替换为此行。

//You can add the ID or class associated with your button where
// button is stated below. 
$(document).on("click","button",function()
{
   getPatternData();
});

如果从AJAX加载任何东西,那么在初始DOM加载后很可能会有元素附加到DOM树,这意味着它们没有绑定到处理程序。