如何隐藏所选数据集的工具提示？ -Chart.js v2.8

时间：2019-10-15 21:33:17

标签： javascript chart.js

我有四个数据集的图。两个显示值的计数，两条线代表每个值的目标。我想要的是在悬停时将所有工具提示分组，但排除目标线的两个工具提示。怎么做到的？

以下代码显示了一些数据的模型编号，工具提示显示了所有标签。

var ctx = document.getElementById('myChart');
var myChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: ["January", "February", "March", "April", "May", "June"],
    datasets: [{
        label: 'Count type 1',
        data: [48, 33, 32, 35, 42, 38],
        backgroundColor: 'transparent',
        borderColor: 'rgba(255, 204, 0, 1)',
        fillColor: 'rgba(255, 204, 0, 0.1)',
        pointBorderColor: 'transparent',
        pointBackgroundColor: 'rgba(255, 204, 0, 1)',
        pointRadius: 4,
        borderWidth: 2,
        lineTension: 0.3
      },
      {
        label: 'Goal 1',
        data: [48.000, 47.040, 46.080, 45.120, 44.160, 43.200],
        backgroundColor: 'transparent',
        borderColor: 'rgba(0, 255, 0, 1)',
        fillColor: 'transparent',
        pointBorderColor: 'transparent',
        pointRadius: 0,
        borderWidth: 0.4,
        lineTension: 0
      },
      {
        label: 'Count type 2',
        data: [24, 37, 30, 22, 29, 18],
        backgroundColor: 'transparent',
        borderColor: 'rgba(255, 0, 0, 1)',
        fillColor: 'rgba(255, 0, 0, 0.1)',
        pointBorderColor: 'transparent',
        pointBackgroundColor: 'rgba(255, 0, 0, 1)',
        pointRadius: 4,
        borderWidth: 2,
        lineTension: 0.3
      },
      {
        label: 'Goal 2',
        data: [24.000, 23.520, 23.040, 22.560, 22.080, 21.600],
        backgroundColor: 'transparent',
        borderColor: 'rgba(0, 255, 0, 1)',
        pointBorderColor: 'transparent',
        pointRadius: 0,
        borderWidth: 0.4,
        lineTension: 0
      }
    ]
  },
  options: {
    tooltips: {
      enabled: true,
      mode: 'index',
      intersect: false,
    }
  }

})
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
<canvas id="myChart"></canvas>

我尝试了各种方法，其中一些方法可以中途工作（仅排除一个数据集），或者有太多额外的代码，并且消失时“闪烁”或闪烁的工具提示。

2 个答案:

答案 0 :(得分：0)

在处理问题时，我偶然发现使用过滤器的解决方案。它基于answer的类似问题。 

filter: function (tooltipItems, data) {
    var label = data.datasets[tooltipItems.datasetIndex].label;
    if ((label == "Goal 1")||(label == "Goal 2")) {
        return false;
    } else {
        return true;
    }
}

这是我原始问题中的代码，包括此过滤器。

var ctx = document.getElementById('myChart');
var myChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: ["January", "February", "March", "April", "May", "June"],
    datasets: [{
        label: 'Count type 1',
        data: [48, 33, 32, 35, 42, 38],
        backgroundColor: 'transparent',
        borderColor: 'rgba(255, 204, 0, 1)',
        fillColor: 'rgba(255, 204, 0, 0.1)',
        pointBorderColor: 'transparent',
        pointBackgroundColor: 'rgba(255, 204, 0, 1)',
        pointRadius: 4,
        borderWidth: 2,
        lineTension: 0.3
      },
      {
        label: 'Goal 1',
        data: [48.000, 47.040, 46.080, 45.120, 44.160, 43.200],
        backgroundColor: 'transparent',
        borderColor: 'rgba(0, 255, 0, 1)',
        fillColor: 'transparent',
        pointBorderColor: 'transparent',
        pointRadius: 0,
        borderWidth: 0.4,
        lineTension: 0
      },
      {
        label: 'Count type 2',
        data: [24, 37, 30, 22, 29, 18],
        backgroundColor: 'transparent',
        borderColor: 'rgba(255, 0, 0, 1)',
        fillColor: 'rgba(255, 0, 0, 0.1)',
        pointBorderColor: 'transparent',
        pointBackgroundColor: 'rgba(255, 0, 0, 1)',
        pointRadius: 4,
        borderWidth: 2,
        lineTension: 0.3
      },
      {
        label: 'Goal 2',
        data: [24.000, 23.520, 23.040, 22.560, 22.080, 21.600],
        backgroundColor: 'transparent',
        borderColor: 'rgba(0, 255, 0, 1)',
        pointBorderColor: 'transparent',
        pointRadius: 0,
        borderWidth: 0.4,
        lineTension: 0
      }
    ]
  },
  options: {
    tooltips: {
      enabled: true,
      mode: 'index',
      intersect: false,
      filter: function(tooltipItems, data) {
        var label = data.datasets[tooltipItems.datasetIndex].label;
        if ((label == "Goal 1") || (label == "Goal 2")) {
          return false;
        } else {
          return true;
        }
      }
    }
  }

})
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
<canvas id="myChart"></canvas>

答案 1 :(得分：0)

最终版本（希望如此）。在我回答之后不久，我偶然发现了这个插件，这正是我真正想要的。 https://github.com/chartjs/chartjs-plugin-annotation 

var ctx = document.getElementById('myChart');
var myChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: ["January", "February", "March", "April", "May", "June"],
    datasets: [{
        label: 'Count type 1',
        data: [48, 33, 32, 35, 42, 38],
        backgroundColor: 'transparent',
        borderColor: 'rgba(255, 204, 0, 1)',
        fillColor: 'rgba(255, 204, 0, 0.1)',
        pointBorderColor: 'transparent',
        pointBackgroundColor: 'rgba(255, 204, 0, 1)',
        pointRadius: 4,
        borderWidth: 2,
        lineTension: 0.3
      },
      
      {
        label: 'Count type 2',
        data: [24, 37, 30, 22, 29, 18],
        backgroundColor: 'transparent',
        borderColor: 'rgba(255, 0, 0, 1)',
        fillColor: 'rgba(255, 0, 0, 0.1)',
        pointBorderColor: 'transparent',
        pointBackgroundColor: 'rgba(255, 0, 0, 1)',
        pointRadius: 4,
        borderWidth: 2,
        lineTension: 0.3
      }
    ]
  },
options: {
		responsive: true,
		tooltips: {
    	enabled: true,
      mode: 'index',
      intersect: false, 
    },
    
    annotation: {
        annotations: [{   
            type: 'line',  
            mode: 'horizontal',
            drawTime: 'afterDatasetsDraw',
            id: 'a-line-1',
            scaleID: 'y-axis-0',
            value: 48,
            endValue: 43,
            borderColor: 'rgb(75, 192, 192)',
            borderWidth: 2,
            label: {
                backgroundColor: 'rgba(255,204,0, 0.4)',
                fontColor: 'rgba(0, 0, 0, 0.6 )',
                fontSize: 12,
                enabled: true,
                content: 'Goal from 48 to 43',
                yAdjust: -18,
                xAdjust: 0,
            }
        },
        {
            type: 'line',   
            mode: 'horizontal',
            drawTime: 'afterDatasetsDraw',
            id: 'a-line-2',
            scaleID: 'y-axis-0',
            value: 24,
            endValue: 21,
            borderColor: 'rgb(75, 192, 192)',
            borderWidth: 2,
            label: {
                backgroundColor: 'rgba(255,0,0,0.4)',
                fontColor: 'rgba(255, 255, 255 )',
                fontSize: 12,
                enabled: true,
                content: 'Goal from 24 to 21',
                yAdjust: 14,
                xAdjust: 0,
            }
        }]
    },
    
    scales: {
        yAxes: [{
            scaleLabel: {
                display: true,
                labelString: 'interface'
            },
            ticks: {
                beginAtZero: true
            }
        }]
    }
}

})
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
<script src="https://rawgit.com/chartjs/chartjs-plugin-annotation/master/chartjs-plugin-annotation.js"></script>

<canvas id="myChart"></canvas>

相关问题
最新问题