chartjs-trendline 实现虚线吗？

Question

使用chartjs和chartjs-trendline插件。我试图通过实现虚线趋势线来满足用户界面的要求。然而事实证明，这对我来说是一个重大挑战。我的建议范围从 borderDash[] 到 lineDash[] 到仅使用虚线..但没有一个有效。我当前的代码是这样的：

 this.chart = new Chart('canvas', {
        type: 'line',
        data: {
          labels: value.map(x => x.key),
          datasets: [
            {
              label: "Trend",
              showLine:false,
              lineDash:[5,5],
              data: value.map(x => x.value),
              pointBorderColor: this.trendcolour,
              pointBackgroundColor: this.trendcolour,
              borderColor: this.trendcolour,
              backgroundColor: this.trendcolour,            
              trendlineLinear: {
                style: this.trendcolour,
                lineStyle: "solid",
                lineDash:[5,5],
                width: 2,
                options:{
                  lineDash:[5,5],
                  borderDash: [10,10]
                }
              },
            } as any
          ]
        },
        plugins:[chartTrendline]
       });

产生：

有没有办法使用这个插件..来实现虚线而不是点线或实线？感谢您提供的任何建议。

Answer 1

只需将 lineStyle 属性从 solid 更改为 dotted

见下图：

this.chart = new Chart('canvas', {
        type: 'line',
        data: {
          labels: value.map(x => x.key),
          datasets: [
            {
              label: "Trend",
              showLine:false,
              lineDash:[5,5],
              data: value.map(x => x.value),
              pointBorderColor: this.trendcolour,
              pointBackgroundColor: this.trendcolour,
              borderColor: this.trendcolour,
              backgroundColor: this.trendcolour,            
              trendlineLinear: {
                style: this.trendcolour,
                lineStyle: "dotted",
                lineDash:[5,5],
                width: 2,
                options:{
                  lineDash:[5,5],
                  borderDash: [10,10]
                }
              },
            } as any
          ]
        },
        plugins:[chartTrendline]
       });