僅在一個數據集上禁用chartJS工具提示

Question

有沒有辦法讓人們可以禁用Chart JS Chart上的一個數據集上的工具提示，並將工具提示留在其他數據集中。這裏是我當前的代碼：

var data = { 
        labels: [' . $labels . '], 
        datasets: [ 
         { 
          label: "Portfolio Performance", 
          fillColor: "rgba(0,0,220,0.2)", 
          strokeColor: "rgba(0,220,220,1)", 
          pointColor: "rgba(0,0,0,1)", 
          pointStrokeColor: "#fff", 
          pointHighlightFill: "#fff", 
          pointHighlightStroke: "rgba(220,220,220,1)", 
          data: [' . $values . '] 
         }, 
         { 
          label: "Portfolio Expendature", 
          fillColor: "rgba(0,0,220,0)", 
          strokeColor: "rgba(0,0,0,1)", 
          pointColor: "rgba(0,0,0,0)", 
          pointStrokeColor: "rgba(0,0,220,0)", 
          pointHighlightFill: "rgba(0,0,220,0)", 
          pointHighlightStroke: "rgba(220,220,220,0)", 
          data: [4450000,4450000,4450000,4450000,4450000] 
         } 
        ] 
       }; 
       var option = { 
        tooltipTemplate: "<%if (label){%><%=label%>: <%}%><%= \'£\' + FormatNumberBy3(Number(value).toFixed(2), \'.\' , \',\') %>", 

        maintainAspectRatio: false, 
        bezierCurve: false, 
        responsive: true, 
        scaleLabel: "<%= \'£\' + FormatNumberBy3(Number(value), \'.\' , \',\') %>" 
       }; 

       var ctx = document.getElementById("graph").getContext("2d"); 
       var myLineChart = new Chart(ctx).Line(data, option); 

Answer 1

您可以使用自定義工具提示要做到這一點（基本上你使用的HTML元素，而不是使用畫布渲染單獨的工具提示）。有關折線圖的示例，請參見https://github.com/nnnick/Chart.js/blob/v1.0.2/samples/line-customTooltips.html。

對於您的情況，您可以調整https://github.com/nnnick/Chart.js/blob/v1.0.2/samples/line-customTooltips.html#L68的循環以排除/包含您認爲合適的數據集。

Answer 2

我使用自定義工具提示的配置來實現這一（這裏隱藏了沒有「收入」標籤的數據集）：

this.myChart = new Chart(this.ctx, { 
     type: 'bar', 
     data: { 
      labels: labels, 
      datasets: [{ 
        label: "Income", 
        data: data3 
       }, 
       { 
        label: "Tax", 
        data: data1, 
        backgroundColor: "#3EAFD5" 
       }, 
       { 
        label: "Expenses", 
        data: data2, 
        backgroundColor: "#D24B47" 
       } 
      ] 
     }, 
     options: { 
      responsive: true, 
      tooltips: { 
       custom: function(tooltipModel) { 
        if (tooltipModel.body && tooltipModel.body[0].lines && tooltipModel.body[0].lines[0].indexOf("Income") == -1) { 
         tooltipModel.opacity = 0; 
        } 
       } 
      } 
     } 
    }