2017-04-04 8 views
0

棒グラフをクリックするとグラフデータが表示されます。AMチャートをクリックしてもグラフデータが表示されない

enter image description here

私は青い線をクリックすると、それは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); 

        } 
       }] 
     }); 
    } 

:私は同じのために以下のコードを試してみました。私のコメントで述べたように

はあなたに

+0

あなたのデータセットを使用していますフィドルを提供することはできますか?チャートの設定がデータ内のフィールドと一致しません。また、[dataContext](http://docs.amcharts.com/3/javascriptcharts/GraphDataItem#dataContext)は、dataProvider配列の元の項目を使用するため、処理後に結果の「日付」フィールドがない場合あなたのコードevent.item.dataContext.dateは動作しません。 – xorspark

+0

お時間を頂きましてありがとうございます@xorspark下のURLをご覧ください。ここで私は月ではなく年であることがわかります。 https://jsfiddle.net/abhranil/ugsg6hbx/ –

答えて

0

ありがとう、clickGraphItem eventdataContextプロパティは、元のdataProvider配列から配列要素が含まれています。年にアクセスする必要がある場合は、名前で参照するだけです。あなたのグラフは、あなたがアクセスする必要のある年プロパティを決定するために、グラフのIDまたは他の識別子を使用して、自分の年のための具体的な情報をプロットするので:

"event": "clickGraphItem", 
"method": function(event) { 
    if (event.graph.id == "AmGraph-1") { 
    alert(event.item.dataContext.month + ' ' + event.item.dataContext.year); 
    } 
    else { 
    alert(event.item.dataContext.month + ' ' + event.item.dataContext.year2); 
    } 
} 

Updated fiddle

+0

ありがとうございます@xorspark .. –

関連する問題