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，演示了上述方法（从您的问题中分叉）。

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

1 个答案: