ChartJS工具提示自定义

问题描述 投票:0回答:1

我正在运行ChartJS 2.7.something,并且有https://codepen.io/anon/pen/YBJWKX这个图表。代码如下:

var ctx = document.getElementById("chart");

Chart.controllers.LineWithLine = Chart.controllers.line.extend({
draw: function(ease) { Chart.controllers.line.prototype.draw.call(this, ease);

if (this.chart.tooltip._active && this.chart.tooltip._active.length) {
  let activePoint = this.chart.tooltip._active[0],
    ctx = this.chart.ctx,
    x = activePoint.tooltipPosition().x,
    topY = this.chart.scales['y-axis-a'].top,
    bottomY = this.chart.scales['y-axis-a'].bottom;

  // draw line
  ctx.save();
  ctx.beginPath();
  ctx.moveTo(x, topY);
  ctx.lineTo(x, bottomY);
  ctx.lineWidth = 1;
  ctx.strokeStyle = 'rgba(52,58,64,1)';
  ctx.stroke();
  ctx.restore();
  }
 }
});

var dashboard = new Chart(ctx, {
type: 'bar',
data: {
    responsive: true,
    labels: ["1", "2", "3", "4", "5", "6", "7"],
    datasets: [{
      label: 'No Data',
      yAxisID: 'y-axis-a',
      data: [null,null,4000, null, null, 4000, null],
      backgroundColor: 'rgba(229,229,229,1)',
      borderWidth: '0',
      borderSkipped: 'bottom',
      hoverBackgroundColor: 'rgba(229,229,229,1)',
      hoverBorderWidth: '0',
      showTooltip: false,
    },
    {
        type: 'LineWithLine',
        label: 'Dummy 1',
        fill: false,
        yAxisID: 'y-axis-a',
        data: [2586, 2343, 2380, 2439, 3316, 1570, 3439],
        borderColor: 'rgba(220,53,69,1)',
        backgroundColor: 'rgba(220,53,69,1)',
        borderWidth: 3,
        borderCapStyle: 'butt',
        pointRadius: 2,
        pointBorderWidth: 0,
        pointHoverRadius: 1,
        pointHitRadius: 10,
        lineTension: 0.1, // Removes Bezier on Line
    },
    {
      type: 'LineWithLine',
      label: 'Dummy 2',
      fill: false,
      yAxisID: 'y-axis-a',
      data: [3466, 1295, 3015, 2351, 3305, 1167, 1350],
      borderColor: 'rgba(40, 167, 69,1)',
      backgroundColor: 'rgba(40, 167, 69,1)',
      borderWidth: 3,
      borderCapStyle: 'butt',
      pointRadius: 2,
      pointBorderWidth: 0,
      pointHoverRadius: 1,
      pointHitRadius: 10,
      lineTension: 0.1, // Removes Bezier on Line
    },
    {
      type: 'LineWithLine',
      label: 'Dummy 3',
      fill: false,
      yAxisID: 'y-axis-b',
      data: [1, 8, 17, 6, 12, 4, 7],
      borderColor: 'rgba(0, 123, 255,1)',
      backgroundColor: 'rgba(0, 123, 255,1)',
      borderWidth: 3,
      borderCapStyle: 'butt',
      pointRadius: 2,
      pointBorderWidth: 0,
      pointHoverRadius: 1,
      pointHitRadius: 10,
      lineTension: 0.1, // Removes Bezier on Line
    },
  ]
},
options: {
    bezierCurve: false,
    maintainAspectRatio:false,
    legend: {
      labels: {
        filter: function(item, dashboard) {
           // Logic to remove a particular legend item goes here
           return !item.text.includes('No Data');
        }
      }
    },
    tooltips: {
      mode: 'index',
      intersect: false,
      //enabled: false,
    },
    scales: {
      yAxes: [{
          position: "left",
          id: "y-axis-a",
          ticks: {
            suggestedMax: 3600,
          }
        },
        {
            position: "left",
            id: "y-axis-b",
            max: 25,
            display: false,
            gridLines: {
                display:false
            }
            }],
        },
      xAxes: [{ }]
    }
});

然而,它几乎完美适合我需要的东西:

在这种特殊情况下,我想从工具提示中删除“无数据”灰色条,其中值为NULL。

同时,我还想完全删除工具提示,它的值不是NULL,即禁用。

我在索引模式下使用工具提示,交叉变为false,以便图表上的黑线工作,黑线来自this question

我已经尝试了一系列来自stackoverflow的东西,但是我觉得我尝试过的东西都没有用,因为工具提示是如何设置的。

我可以在这里做我需要的吗?

javascript chart.js
1个回答
1
投票

只需更改你的options参数。

tooltips: {
            mode: 'index',
            intersect: false,
            callbacks: {
                //returns a empty string if the label is "No Data"
                label: function(items, data){
                    let dataset = data.datasets[items.datasetIndex];
                    if(dataset.label !== "No Data") {
                        return `${dataset.label}: ${items.yLabel}`
                    } else {
                        return ""
                    }
                },

                //only returns something when at least one dataset yLabel is a valid number.
                title: function(t, e) {
                    let shouldDisplay = false;
                    t.forEach((it) => {
                       if(!isNaN(it.yLabel)) shouldDisplay = true;
                    });
                    if(shouldDisplay) {
                        return t[0].xLabel;
                    }
                }
            }
        },

可能有更好的方法来优化它,但我希望它有所帮助

© www.soinside.com 2019 - 2024. All rights reserved.