ChartJs-是否可以在一个数据集中仅显示工具提示?

时间:2018-09-07 17:22:50

标签: angular chart.js chartjs-2.6.0

我有两个数据集,一个是线,第二个是条。

问题在于工具提示在两个数据集中都有效,而我只想在第一栏中工作。

我只想在条形数据集上显示工具提示,可以吗?

这是我的代码。

var chartData = {
  labels: ["January", "February", "March"],
  datasets: [
    {
      type: "line",
      label: "OEE",
      tooltip: false,
      borderColor: window.chartColors.red,
      borderWidth: 2,
      fill: false,
      data: [0,10,0,15]
    },
    {
      type: "bar",
      label: "Paro",
      backgroundColor: window.chartColors.yellow,
      data: [0,6,0,0],
      borderColor: "white",
      borderWidth: 2

    }
  ]
};
window.onload = function() {
  var ctx = document.getElementById("canvas").getContext("2d");
  window.myMixedChart = new Chart(ctx, {
    type: "bar",
    data: chartData,
    options: {
      responsive: true,
      title: {
        display: true,
        text: "Test"
      },
    tooltips: {
      callbacks: {
        title: function(tooltipItem) {
          return "Title";
        },
        label: function(tooltipItem) {
          return "Reason";
        }
      },
      backgroundColor: '#FFF',
      titleFontSize: 16,
      titleFontColor: '#0066ff',
      bodyFontColor: '#000',
      bodyFontSize: 14,
      displayColors: false
    }
    }
  });
};

谢谢。

2 个答案:

答案 0 :(得分:0)

您可以检查类型并将其禁用为

tooltips: {
          filter: function (tooltipItem, data) {
              var type = data.type;
              if (type == "Bar") {
                return true;
              } else {
                return false;
              }
          }

答案 1 :(得分:0)

编辑了Sajeetharan的代码,这对我有用:

    tooltips: {
      filter: function (tooltipItem, data) {
        const type = data.datasets[tooltipItem.datasetIndex].type;
        if (type === 'bar') {
          return true;
        } else {
          return false;
        }
      }
    }