javascript - 在图表js中的半圆环图中绘制起点和终点之间的线

Question

我使用图表js绘制了一个半圆环图。但我想在图表底部画一条直线(绿色)，例如

我该如何画这条线？

Answer 1

这不是 war 电影 Material 。这不是司法不公的文献 Material 。但它应该会给您带来一两次刺激。

这是一个插件，其工作原理如下。它沿着第一片 donut 的起始侧绘制细绿线到中心，然后继续沿着最后一片 donut 的结束侧。这样做是为了能够使用人们想要的任何 donut 周长，例如圆的 5/8:

使用了一些(8 像素)填充，以便细绿线将有一些空间延伸到切片之外一点(4 像素)。 A working fiddle is here.代码(注释足够)也可以在下面找到。

var theThinGreenLinePlugin = {
  afterDatasetsDraw: function(chartInstance, easing) {
    // The context, needed for drawing.
    var ctx = chartInstance.chart.ctx;
    // The first (and, assuming, only) dataset.
    var dataset = chartInstance.data.datasets[0];
    // The dataset's data length.
    var datasetDataLength = dataset.data.length;
    // The model of the first slice.
    var firstDatumModel = dataset._meta[Object.keys(dataset._meta)[0]].data[0]._model;
    // The model of the last slice.
    var lastDatumModel = dataset._meta[Object.keys(dataset._meta)[0]].data[datasetDataLength - 1]._model;
    // The Thin Green Line's radius (measured from the center of the doughnut).
    // Add a few pixels to make the line extend a bit from the slice's outer radius.
    var lineRadius = firstDatumModel.outerRadius + 4;
    // The first point of The Thin Green Line (for the first slice).
    var firstSliceStartX = firstDatumModel.x + lineRadius * Math.cos(firstDatumModel.startAngle);
    var firstSliceStartY = firstDatumModel.y + lineRadius * Math.sin(firstDatumModel.startAngle);
    // The last point of The Thin Green Line (for the last slice).
    var lastSliceEndX = lastDatumModel.x + lineRadius * Math.cos(lastDatumModel.endAngle);
    var lastSliceEndY = lastDatumModel.y + lineRadius * Math.sin(lastDatumModel.endAngle);

    // Save the context, in order to mess with it. We will restore it later.
    ctx.save();

    // Green
    ctx.strokeStyle = '#3db24b';
    // Thin
    ctx.lineWidth = 4.0;
    ctx.beginPath();
    ctx.moveTo(firstSliceStartX, firstSliceStartY);
    // Go through the center, so that other doughnuts (e.g. 3/4 doughnuts) will make sense.
    ctx.lineTo(firstDatumModel.x, firstDatumModel.y);
    ctx.lineTo(lastSliceEndX, lastSliceEndY);
    ctx.stroke();

    // Restore the context.
    ctx.restore();
  }
};

Chart.pluginService.register(theThinGreenLinePlugin);

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

var myChart = new Chart(ctx, {
  type: 'doughnut',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
      data: [12, 19, 3, 5, 2, 3],
      backgroundColor: [
        'rgba(255, 99, 132, 0.2)',
        'rgba(54, 162, 235, 0.2)',
        'rgba(255, 206, 86, 0.2)',
        'rgba(75, 192, 192, 0.2)',
        'rgba(153, 102, 255, 0.2)',
        'rgba(255, 159, 64, 0.2)'
      ],
      borderColor: [
        'rgba(255,99,132,1)',
        'rgba(54, 162, 235, 1)',
        'rgba(255, 206, 86, 1)',
        'rgba(75, 192, 192, 1)',
        'rgba(153, 102, 255, 1)',
        'rgba(255, 159, 64, 1)'
      ],
      borderWidth: 1
    }]
  },
  options: {
    circumference: 1.0 * Math.PI,
    rotation: 1.0 * Math.PI,
    layout: {
      padding: 8
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
<canvas id="myChart" width="400" height="400"></canvas>