Question

我正在运行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的一系列操作，但是我感觉由于工具提示的设置方式，我尝试过的所有操作均无用。

在这里我可以做所有需要的事吗？

Answer 1

只需稍微更改public void ScheduleUpsertMethod(int Id) { var result = _scheduler.Schedule<Account>(service => service.doSomething(Id)); } [AutomaticRetry(OnAttemptsExceeded = AttemptsExceededAction.Fail, Attempts = 3, LogEvents = true)] [DisableConcurrentExecution 5*60] public async Task doSomething(int Id) { }参数即可。

options

也许有更好的方法可以对此进行优化，但我希望它会有所帮助

ChartJS工具提示自定义

1 个答案: