如何在使用 amCharts 执行事件侦听器 clickGraphItem 时引用 JavaScript 对象数组中的变量
How to reference a variable in an array of JavaScript objects when executing event listener clickGraphItem using amCharts
我目前有一个名为 chartData 的 JavaScript 对象数组,其中国家和访问作为变量。我利用 amCharts 在柱形图中绘制数据,并使用事件处理程序触发国家 (event.item.category) 和访问 (event.item.values.value) 的警报消息,具体取决于列单击并且一切正常(请参阅下面的 handleClick 函数)。根据下面的代码,我向我的 chartData JavaScript 对象添加了一个名为 id 的附加变量。如何在我的 handleClick 事件函数中访问我的新变量 id。
amCharts JavaScript 代码
<script src="http://www.amcharts.com/lib/amcharts.js" type="text/javascript"></script>
<div id="chartdiv" style="width: 100%; height: 440px; background-color:#eeeeee;"></div>
var chart;
var chartData =
[{
country: "USA",
visits: 4025,
id: 1},
{
country: "China",
visits: 1882,
id: 2},
{
country: "Japan",
visits: 1809,
id: 3},
{
country: "Germany",
visits: 1322,
id: 4},
{
country: "UK",
visits: 1122,
id: 5}];
function handleClick(event)
{
alert(event.item.category + ": " + event.item.values.value);
}
AmCharts.ready(function() {
// SERIAL CHART
chart = new AmCharts.AmSerialChart();
chart.dataProvider = chartData;
chart.categoryField = "country";
chart.startDuration = 1;
// add click listener
chart.addListener("clickGraphItem", handleClick);
var categoryAxis = chart.categoryAxis;
categoryAxis.labelRotation = 90;
categoryAxis.gridPosition = "start";
var graph = new AmCharts.AmGraph();
graph.valueField = "visits";
graph.balloonText = "[[category]]: [[value]]";
graph.type = "column";
graph.lineAlpha = 0;
graph.fillAlphas = 0.8;
chart.addGraph(graph);
chart.write("chartdiv");
});
JsFiddle
http://jsfiddle.net/amcharts2/cV8GG/
你可以在event.item.dataContext
中看到id
function handleClick(event)
{
console.log(event.item.dataContext.id);
alert(event.item.category + ": " + event.item.values.value);
}
我目前有一个名为 chartData 的 JavaScript 对象数组,其中国家和访问作为变量。我利用 amCharts 在柱形图中绘制数据,并使用事件处理程序触发国家 (event.item.category) 和访问 (event.item.values.value) 的警报消息,具体取决于列单击并且一切正常(请参阅下面的 handleClick 函数)。根据下面的代码,我向我的 chartData JavaScript 对象添加了一个名为 id 的附加变量。如何在我的 handleClick 事件函数中访问我的新变量 id。
amCharts JavaScript 代码
<script src="http://www.amcharts.com/lib/amcharts.js" type="text/javascript"></script>
<div id="chartdiv" style="width: 100%; height: 440px; background-color:#eeeeee;"></div>
var chart;
var chartData =
[{
country: "USA",
visits: 4025,
id: 1},
{
country: "China",
visits: 1882,
id: 2},
{
country: "Japan",
visits: 1809,
id: 3},
{
country: "Germany",
visits: 1322,
id: 4},
{
country: "UK",
visits: 1122,
id: 5}];
function handleClick(event)
{
alert(event.item.category + ": " + event.item.values.value);
}
AmCharts.ready(function() {
// SERIAL CHART
chart = new AmCharts.AmSerialChart();
chart.dataProvider = chartData;
chart.categoryField = "country";
chart.startDuration = 1;
// add click listener
chart.addListener("clickGraphItem", handleClick);
var categoryAxis = chart.categoryAxis;
categoryAxis.labelRotation = 90;
categoryAxis.gridPosition = "start";
var graph = new AmCharts.AmGraph();
graph.valueField = "visits";
graph.balloonText = "[[category]]: [[value]]";
graph.type = "column";
graph.lineAlpha = 0;
graph.fillAlphas = 0.8;
chart.addGraph(graph);
chart.write("chartdiv");
});
JsFiddle http://jsfiddle.net/amcharts2/cV8GG/
你可以在event.item.dataContext
function handleClick(event)
{
console.log(event.item.dataContext.id);
alert(event.item.category + ": " + event.item.values.value);
}