2016-05-17 11 views
0

私はこの3つのデータセットグラフ聖霊降臨祭がありますChart.js V2.0:一つだけのデータセットのツールチップ

this.myChart = new Chart(this.ctx, { 
    type: 'bar', 
    data: { 
    labels: labels, 
    datasets: [ 
     { type: 'line', data: data3 }, 
     { type: 'bar', data: data1, backgroundColor: "#3EAFD5" }, 
     { type: 'bar', data: data2, backgroundColor: "#D24B47" } 
    ] 
    } 
} 

は、どのように私は、最初のデータセット(:「行」タイプ)のためのツールチップを表示するために行うことができますか?

答えて

1

あなただけmyChartがあなたのチャートオブジェクトであるチャートオブジェクト

var originalGetElementAtEvent = myChart.getElementAtEvent; 
myChart.getElementAtEvent = function() { 
    return originalGetElementAtEvent.apply(this, arguments).filter(function (e) { 
     return e._datasetIndex == 0; 
    }); 
} 

getElementAtEventメソッドをオーバーライドすることができます。


フィドル - http://jsfiddle.net/x4shhvbk/

+0

ニースソリューション、thaksを!! – drinor

0

私はこれを達成するためのカスタムツールチップの設定を使用します:

this.myChart = new Chart(this.ctx, { 
     type: 'bar', 
     data: { 
      labels: labels, 
      datasets: [{ 
        label: "Line 1", 
        type: 'line', 
        data: data3 
       }, 
       { 
        label: "Bar 1", 
        type: 'bar', 
        data: data1, 
        backgroundColor: "#3EAFD5" 
       }, 
       { 
        label: "Bar 2", 
        type: 'bar', 
        data: data2, 
        backgroundColor: "#D24B47" 
       } 
      ] 
     }, 
     options: { 
      responsive: true, 
      tooltips: { 
       custom: function(tooltipModel) { 
        if (tooltipModel.body && tooltipModel.body[0].lines && tooltipModel.body[0].lines[0].indexOf("Bar") > -1) { 
         tooltipModel.opacity = 0; 
        } 
       } 
      } 
     } 
    } 
関連する問題