在下面的应用程序中我们会监听 pointclick 事件,当节点被点击,我们就会获取数据的信息,将它插入到左边面板的文本框。
graph.addEventListener("pointclick", function (e) {
// store info for later use
currentSeries = e.getSeries();
currentCategory = e.getCategory();
// update fields
valueField.setValue( e.getSeries().getValueByCategory(e.getCategory()) );
seriesField.setText( e.getSeries().getTitle() );
categoryField.setText( e.getCategory().getTitle() );
valueField.setEnabled(true);
});更新图表
当节点的数值改变,我们需要图表中节点的也被正确的更新。这要通过调用 updatePoint。
// when changing the value update the point value and update the graph
valueField.addEventListener("change", function (e) {
if (currentSeries && currentCategory) {
currentSeries.setValueByCategory(currentCategory, valueField.getValue());
graph.updatePoint(currentSeries.getId(), currentCategory.getId());
}
});如果没有这么做视图就不会反映出模型的信息,这会引起混乱。
改变图标类型
前面提到图表组件支持几种不同的图表类型。在这个应用程序中我们允许用户通过组合框改变图表类型。当组合框改变时,我们改变图表的 chartType。改变完类型我们需要调用 update 方法更新视图。
chartTypeCombo.addEventListener("change", function (e) {
graph.setChartType(chartTypeCombo.getSelectedItem().getText());
graph.update();
});