如何用vuejs在chartjs散点图中画线？

Question

我正在做一个数据可视化项目。我使用 Django 作为后端，Vue 作为前端。要绘制图表，我使用 chartjs。 对于散点图，我需要绘制中线（垂直和水平）。通过遵循 tutorials 之一，我了解到我需要添加一个插件。我尝试了不同的方式来启动插件：作为方法或计算。或者只是将它添加到插件中。

<template>
       <Scatter :style="{ height: '400px' }" :data="chartData" :options="chartOptions" />
</template>

<script>
import {
  Chart as ChartJS,
  LinearScale,
  PointElement,
  LineElement,
  Tooltip,
  Legend
} from 'chart.js'
import { Scatter } from 'vue-chartjs'

ChartJS.register(LinearScale, PointElement, LineElement, Tooltip, Legend)

export default {
    name: 'ScatterChart',
    components: {
        Scatter
    },
    props: {
        homeTeam: Boolean,
        playerStats: Array,
    },
    mounted() {

    },
    watch: {
        playerStats() {
            this.setDataSets();
        }
    },
    methods: {
        setDataSets() {
            this.datasets = [];
            this.playerStats.forEach(player => {
                let dataset = {
                    label: player.player_name,
                    data: [
                        {
                            x: player.attack,
                            y: player.defense
                        }
                    ],
                    backgroundColor: this.bgColor
                };
                this.datasets.push(dataset);
            });
        },
    },
    computed: {
        chartData() {
            return {
                datasets:
                    this.datasets
            }
        },
        chartOptions() {
            return {
                responsive: true,
                maintainAspectRatio: false,
                scales: {
                    x: {
                        type: 'linear',
                        position: 'bottom',
                        title: {
                            display: true,
                            text: 'Attack',
                        },
                    },
                    y: {
                        type: 'linear',
                        position: 'left',
                        title: {
                            display: true,
                            text: 'Defense',
                        },
                    }
                },
                plugins: [
                    {
                        id: 'horizontalMedianLine',
                        beforeDraw (chart) {
                            console.log('horizontalMedianLine called');
                            const yScale = chart.scales['y'];
                            const xScale = chart.scales['x'];
                            const ctx = chart.ctx;
                            const yValue = yScale.getPixelForValue(1.25);
                            const xValue = xScale.getPixelForValue(2.5);
                            console.log('yValue:', yValue);
                            console.log('xValue:', xValue);
                            ctx.save();
                            ctx.beginPath();
                            ctx.moveTo(xScale.left, yValue);
                            ctx.lineTo(xScale.right, yValue);
                            ctx.moveTo(xValue, yScale.top);
                            ctx.lineTo(xValue, yScale.bottom);
                            ctx.setLineDash([5, 5]);
                            ctx.strokeStyle = 'red';
                            ctx.lineWidth = 2;
                            ctx.stroke();
                            ctx.restore();
                        },
                    },
                ],
            }
        },
    },
    data() {
        return {
            datasets: [],
            bgColor: this.homeTeam ? 'rgb(255, 99, 132)' : 'rgb(54, 162, 235)',
        }
    },
}
</script>

因此，我想在图表上看到 2 条线：

我做错了什么？请帮助。

Answer 1

您放错了内联插件对象。它不应该在

options

之下，而是在用于构建图表的对象的顶层。

在您的设置中指定插件的一种可能方法可能是声明一个计算方法

chartPlugins

：

computed: {
    chartData(){
        return {
            datasets: this.datasets,
        };
    },
    chartPlugins(){
        return [{
            id: "horizontalMedianLine",
            
            beforeDraw(chart){
                //......
            }
        }]
    }
}

并在模板中使用它：

<template>
  <Scatter
    :style="{ height: '400px' }"
    :plugins="chartPlugins"
    :data="chartData"
    :options="chartOptions"
  />
</template>

---

此外，您不需要插件来绘制这些线条；使用两个新数据集会更有效。这是水平的：

methods: {
    setDataSets(){
        this.datasets = [];
        chartConfig.playerStats.forEach((player) => {
            //.......
        });
        const attack = this.playerStats.map(({attack}) => attack);
        this.datasets.push({
            borderColor: 'red',
            showLine: true,
            pointRadius: 0,
            segment: {borderDash: [5, 5]},
            data: [[Math.min(...attack), 1.25], [Math.max(...attack), 1.25]]
        });
    }
}