棒グラフをクリックするとグラフデータが表示されます。AMチャートをクリックしてもグラフデータが表示されない
私は青い線をクリックすると、それは2016年5月、すなわち、それぞれの年と月を返しますよう。同様に黄色の線をクリックすると、年と月が返されます。私はコードの下で試してみましたが、青い線または黄色の線のいずれかが1年しかないときに動作します。しかし、私は複数の年のグラフの同じコードをしようとしている年を得ることができません。添付のチャートを通過し、それに応じて対応してください
{result":[{"month":"Jan","year":"2016","totbooking":"0","nights":"0","comp_month":"Jan","year1":"2017","totbooking1":964,"nights1":"2685"},{"month":"Feb","year":"2016","totbooking":"0","nights":"0","comp_month":"Feb","year1":"2017","totbooking1":"0","nights1":"0"},{"month":"Mar","year":"2016","totbooking":"0","nights":"0","comp_month":"Mar","year1":"2017","totbooking1":"0","nights1":"0"},{"month":"Apr","year":"2016","totbooking":73,"nights":"154","comp_month":"Apr","year1":"2017","totbooking1":"0","nights1":"0"},{"month":"May","year":"2016","totbooking":240,"nights":"530","comp_month":"May","year1":"2017","totbooking1":"0","nights1":"0"},{"month":"Jun","year":"2016","totbooking":232,"nights":"544","comp_month":"Jun","year1":"2017","totbooking1":"0","nights1":"0"},{"month":"Jul","year":"2016","totbooking":224,"nights":"506","comp_month":"Jul","year1":"2017","totbooking1":"0","nights1":"0"},{"month":"Aug","year":"2016","totbooking":419,"nights":"1069","comp_month":"Aug","year1":"2017","totbooking1":"0","nights1":"0"},{"month":"Sep","year":"2016","totbooking":708,"nights":"1737","comp_month":"Sep","year1":"2017","totbooking1":"0","nights1":"0"},{"month":"Oct","year":"2016","totbooking":721,"nights":"1875","comp_month":"Oct","year1":"2017","totbooking1":"0","nights1":"0"},{"month":"Nov","year":"2016","totbooking":723,"nights":"1739","comp_month":"Nov","year1":"2017","totbooking1":"0","nights1":"0"},{"month":"Dec","year":"2016","totbooking":723,"nights":"1682","comp_month":"Dec","year1":"2017","totbooking1":"0","nights1":"0"}]}
:私は、以下のデータセットを持っています。このため
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"theme": "light",
"chartScrollbar": {
"graph": "g1",
"oppositeAxis": false,
"offset": 30,
"scrollbarHeight": 50,
"backgroundAlpha": 0,
"selectedBackgroundAlpha": 0.1,
"selectedBackgroundColor": "#888888",
"graphFillAlpha": 0,
"graphLineAlpha": 0.5,
"selectedGraphFillAlpha": 0,
"selectedGraphLineAlpha": 1,
"autoGridCount": true,
"color": "#AAAAAA"
},
"chartCursor": {
"pan": true,
"valueLineEnabled": true,
"valueLineBalloonEnabled": true,
"cursorAlpha": 0,
"valueLineAlpha": 0.2
},
"categoryAxis": {
"parseDates": true,
"dashLength": 1,
"minorGridEnabled": true
},
"legend": {
"useGraphSettings": true,
"position": "top"
},
"balloon": {
"borderThickness": 1,
"shadowAlpha": 0
},
"dataProvider": res_data,
"categoryField": "date",
"startDuration": 1,
"categoryAxis": {
"gridPosition": "start"
},
"graphs": [
{
"balloonText": "[[date]]" + ' ' + "[[year]]" + ":[[value]]",
"fillAlphas": 0.8,
"id": "AmGraph-1",
"lineAlpha": 0.2,
"title": res[0] + ' ' + valuetext,
"columnWidth": 0.5,
"type": viewcolumn,
"valueField": "value"
},
{
"balloonText": "[[date]]" + ' ' + "[[year1]]" + ":[[value1]]",
"fillAlphas": 0.8,
"id": "AmGraph-2",
"lineAlpha": 0.2,
"title": res[1] + ' ' + valuetext,
"type": viewcolumn,
"valueField": "value1"
}
],
"valueAxes": [
{
"id": "ValueAxis-1",
"title": "",
"axisAlpha": 0
}
],
"export": {
"enabled": true
},
"listeners": [{
"event": "clickGraphItem",
"method": function (event) {
//console.log(event.item.dataContext.date);
alert(event.item.dataContext.date);
}
}]
});
}
:私は同じのために以下のコードを試してみました。私のコメントで述べたように
はあなたに
あなたのデータセットを使用していますフィドルを提供することはできますか?チャートの設定がデータ内のフィールドと一致しません。また、[dataContext](http://docs.amcharts.com/3/javascriptcharts/GraphDataItem#dataContext)は、dataProvider配列の元の項目を使用するため、処理後に結果の「日付」フィールドがない場合あなたのコードevent.item.dataContext.dateは動作しません。 – xorspark
お時間を頂きましてありがとうございます@xorspark下のURLをご覧ください。ここで私は月ではなく年であることがわかります。 https://jsfiddle.net/abhranil/ugsg6hbx/ –