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

Question

我使用图表js绘制了半圆形图表。但我想绘制图表的直线底部（绿色），如

我怎样画这条线？

Answer 1

这不是战争电影素材。这不是正义错误的纪录片材料。但它应该给你一两个快感。

这是一个插件，其工作原理如下。它沿着甜甜圈第一片的起始侧绘制细绿线直到中心，然后沿着甜甜圈的最后一片的末端继续。它这样做，以便能够使用人们希望的任何圆周长度，例如，圆圈的5/8：

使用了一些（8像素）填充，因此细绿线将有一些空间可以在切片之外延伸一点（4个像素）。 A working fiddle is here.下面还提供了代码（足够评论）。

＆＃13;

＆＃13;

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
    }
  }
});

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;