javascript - Chart.js 2 - 如何始终显示所有工具提示并对其进行样式化

Question

我该怎么做 ，与 Chart.js 2？

现在我已经做到了

<canvas id="myChart1" width="960" height="400"></canvas>...

所有代码都在这里https://jsfiddle.net/semenova_7oa/xLbobm5y/

但我不知道如何做这种风格

Answer 1

由于您已经在每个点上绘制数字，因此只需绘制从点到文本的文本下划线和线条即可。基本上，您使用相同的方法计算 x 和 y 坐标并绘制。

这是一个更新的函数，可以绘制您所请求的内容(并为每行应用正确的颜色......您已经遗漏了)。请注意，它取决于讨论的文本下划线函数 here .

Chart.plugins.register({
  afterDatasetsDraw: function(chartInstance, easing) {
    // To only draw at the end of animation, check for easing === 1
    var ctx = chartInstance.chart.ctx;

    // for each line
    chartInstance.data.datasets.forEach(function(dataset, i) {
      var meta = chartInstance.getDatasetMeta(i);
      if (!meta.hidden) {
        meta.data.forEach(function(element, index) {
          ctx.fillStyle = element._model.borderColor;

          var fontSize = 19;
          var fontStyle = 'normal';
          var fontFamily = 'Helvetica Neue';
          ctx.font = Chart.helpers.fontString(fontSize, fontStyle, fontFamily);

          // Just naively convert to string for now
          var dataString = "";
          if ((index != 0) && (index != 4)) {
            dataString = number_format(dataset.data[index].toString(), 0, ',', ' ');
          }

          var padding = 20;
          var position = element.tooltipPosition();
          var thickness = 1;
          position.x -= 10;
          ctx.textAlign = 'right';
          ctx.textBaseline = 'middle';

          // draw text
          ctx.fillText(dataString, position.x, position.y - (fontSize / 2) - padding);

          // underline text
          var underlinePoint = underline(ctx, dataString, position.x, position.y - (fontSize / 2) - padding, fontSize, element._model.borderColor, thickness, -5);

          // draw line connecting text underline with point
          ctx.beginPath();
          ctx.strokeStyle = element._model.borderColor;
          ctx.lineWidth = thickness;
          ctx.moveTo(element._model.x, element._model.y);
          ctx.lineTo(underlinePoint.x, underlinePoint.y);
          ctx.stroke();
        });
      }
    });
  }
});

这是一个jsfiddle这演示了上述方法(从您的问题中 fork 出来)。