Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
689 views
in Technique[技术] by (71.8m points)

javascript - How to disable a tooltip for a specific dataset in ChartJS

I displaying a chart where two types are included. Now I want to hide the toolbar for one dataset. I saw some discussion like this on GitHub, but this doesn't bring me further.

Here is an example of my Chart:

Chart.defaults.global.legend.display = false;
var ctx = document.getElementById("chart").getContext("2d");
var data = {
  labels: ["Januar","Februar","M?rz","April","Mai","Juni","Juli","August","September","Oktober","November","Dezember"],
  datasets: [
     {
       label: "Test",
       type: 'bar',
       backgroundColor: "#F29220",
       borderColor: "#F29220",
       data: [4,1,1,2,2,2,2,2,2,2,2,1]
     },
     {
       label: "Test2",
       type: 'bar',
       backgroundColor: "#F29220",
       borderColor: "#F29220",
       data: [4,0,0,0,0,0,0,0,0,0,0,0]
     },
     {
       label: "",
       type: 'line',
       fillColor: "rgba(220,220,220,0)",
       pointColor: "rgba(220,220,220,0)",
       borderColor: "#FF0000",
       tooltip: false,
       data: [100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100]
     }]
  };
  var myBarChart = new Chart(ctx, {
    type: 'bar',
    data: data,
    options: {
       scales: {
          xAxes: [{
             stacked: true,
             ticks: {
                fontColor: '#000',
             }
          }],
          yAxes: [{
             stacked: true,
             ticks: {
                beginAtZero: true,
                fontColor: '#000',
                callback: function(label, index, labels) {
                   return label + '%';
                }
             },
          }]
       },
       elements: {
          point:{
             radius: 0
          }
       },
       tooltips: {
          enabled: true,
          mode: 'single',
          callbacks: {
             label: function(tooltipItems, data) {
                 return data.datasets[tooltipItems.datasetIndex].label + ': ' + tooltipItems.yLabel + ' %';
          }
       }
    }
 }
 });
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<canvas id="chart" width="740" height="370"></canvas>
See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

There is now a way to configure charjs to do this; simply use the filter property:

tooltips: {
    filter: function (tooltipItem) {
        return tooltipItem.datasetIndex === 0;
    }
}

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...