Question

使用ChartJs（v2.2.2）可以更改图表上最后2个点之间的线条样式。例如一路坚实，然后在最后破灭？见下图

Answer 1

borderDash属性（滚动到线路配置）是您问题的关键。

问题是，完整的图表是用边框破折号绘制的，你无法选择它的起始位置和结束位置。
一个简单的解决方法是创建两个相同的数据集。一个点缀，一个带有平线。然后你将你的普通数据的最后一个数据移除，它们都将显示为你想要的数据。

您可以在this jsFiddle中看到完整的代码，结果如下：

注意：

由于现在有两个数据集，因此图例将同时显示这两个数据集。将display设置为false会将其修复（或多或少）。
声明顺序并不重要，因为普通线总是会覆盖虚线。
具有贝塞尔曲线（tension属性＆gt; 0）可能会产生显示问题，因为两个数据集中的数据不同。

Answer 2

您可以创建一个autoconf图表，并使用Plugin Core API在画布上直接绘制线条。 API提供了一系列可用于执行自定义代码的挂钩。这种方法的优点是您可以自定义每条连接线的样式（宽度，颜色，虚线图案等）。

scatter

const labels = [1, 2, 3, 4, 5, 6];
const values = [12, 19, 3, 5, 2, 3];
const data = labels.map((label, index) => ({ x: label, y: values[index]}));

var lineChart = new Chart(document.getElementById("chart"), {
  type: "scatter",
  plugins: [{
    afterDraw: chart => {      
      var ctx = chart.chart.ctx; 
      var xAxis = chart.scales['x-axis-1'];
      var yAxis = chart.scales['y-axis-1'];      
      chart.config.data.datasets[0].data.forEach((value, index) => {
        if (index > 0) {        
           var valueFrom = data[index - 1];
           var xFrom = xAxis.getPixelForValue(valueFrom.x);     
           var yFrom = yAxis.getPixelForValue(valueFrom.y);   
           var xTo = xAxis.getPixelForValue(value.x);         
           var yTo = yAxis.getPixelForValue(value.y); 
           ctx.save();      
           ctx.strokeStyle = '#922893';
           ctx.lineWidth = 2;
           if (index + 1 == data.length) {
             ctx.setLineDash([5, 10]);
           }
           ctx.beginPath();
           ctx.moveTo(xFrom, yFrom);             
           ctx.lineTo(xTo, yTo);
           ctx.stroke();
           ctx.restore();
        }
      });      
    }
  }],
  data: {
    datasets: [{
      label: "My Dataset",
      data: data,
      borderColor: '#922893',
      pointBackgroundColor: "transparent"
    }]
  },
  options: {
    legend: {
      display: false
    },
    scales: {
      xAxes: [{
        ticks: {
          stepSize: 1
        }
      }],
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    }
  }
});

在ChartJS中，是否可以改变不同点之间的线条样式？

2 个答案: