2016-05-17 12 views
0

Ich habe Graph Whit diese 3 Datensätze:Chart.js v2.0: Tooltip nur für einen Datensatz

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" } 
    ] 
    } 
} 

Wie kann ich Tooltip tun für die erste Datenmenge nur um zu zeigen, (Typ: 'line')?

Antwort

1

Sie können nur die getElementAtEvent Methode des Diagrammobjekts außer Kraft setzen

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

wo myChart Ihr Diagrammobjekt ist.


Fiddle - http://jsfiddle.net/x4shhvbk/

+0

Schöne Lösung, thaks !! – drinor

0

I Verwendung der benutzerdefinierten Tooltip Konfiguration machen dies zu erreichen:

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; 
        } 
       } 
      } 
     } 
    } 
Verwandte Themen