Question

我有这3个数据集的图表：

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

如何仅针对第一个数据集显示工具提示（类型：＆＃39; line＆＃39;）？

Answer 1

您可以覆盖图表对象的getElementAtEvent方法

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

其中myChart是您的图表对象。

小提琴 - http://jsfiddle.net/x4shhvbk/

Answer 2

似乎这个功能没有添加到Chart.js。

我在此问题中发布了我的解决方案：https://github.com/chartjs/Chart.js/issues/1889

Answer 3

我使用自定义工具提示配置来实现此目的：

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

Chart.js v2.0：仅针对一个数据集的工具提示

3 个答案: