Vue-chartJS中的线段造型

Question

我试图使用VueJS和Vue-chartJS包装器在ChartJS中呈现一个图表。我需要的是一个特定的线段的风格，以一种特殊的方式(例如，如果该值不可用，线段将被虚线/一个不同的颜色)。我查看了chart.js文档，其中指出：

segment: {
        borderColor: ctx => skipped(ctx, 'rgb(0,0,0,0.2)') || down(ctx, 'rgb(192,75,75)'),
        borderDash: ctx => skipped(ctx, [6, 6]),
      },

哪里,

const skipped = (ctx, value) => ctx.p0.skip || ctx.p1.skip ? value : undefined;
const down = (ctx, value) => ctx.p0.parsed.y > ctx.p1.parsed.y ? value : undefined;

现在，我尝试在Vue-chartJS中实现这一点，但这似乎行不通。此外，我没有访问ctx变量的权限。有谁可以帮我？我使用的是ChartJS 2.7.1和Vue图3.5.1，这是我的代码：

this.datacollectionLine = {
        labels: this.labelLine,
        datasets: [
          { 
            data: this.chartData,
            label: "Patient Details",
            backgroundColor: "#2b4c99",

           
            fill: false,
            borderColor: "rgb(43, 76, 153)",
            tension: 0.1,
            pointRadius: 0.1,
            borderWidth: 2,
          },
        ],
      },

Answer 1

线段样式只在Chart.js版本3中可用，因此要使用它，要么需要放弃vue包装器，使用chart.js barebone，要么需要切换到支持chart.js V3 (如vue-图表-3 )的包装器。

请记住，chart.js V3与V2有一些重大的中断性更改，因此您需要重写代码。有关这方面的更多信息，您可以阅读迁移指南。

如果您想继续使用V2 of chart.js，我建议您阅读V2文档而不是V3版本