Vue-chartJS 中的线段样式

Question

我正在尝试使用 ChartJS 和 Vue-chartJS 包装器在 VueJS 中呈现图表。我需要的是以特定方式设置特定线段的样式（例如，如果该值不可用，则线段将变为虚线/不同颜色）。我查看了 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 Chart 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 准系统，或者您需要切换到包装器支持 chart.js V3，如 vue-chart-3。

请记住，chart.jsV3 与 V2 相比有一些重大的重大变化，因此您需要重写代码。有关此的更多信息，您可以阅读 migration guide.

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

Vue-chartJS 中的线段样式

Line segment styling in Vue-chartJS

vue.js

chart.js

vue-chartjs