ChartJS 如何用vuejs在图表中画一条线？

izkcnapc  于 2023-04-30  发布在  Chart.js
关注(0)|答案(1)|浏览(207)

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

  1. <template>
  2.        <Scatter :style="{ height: '400px' }" :data="chartData" :options="chartOptions" />
  3. </template>
  5. <script>
  6. import {
  7.   Chart as ChartJS,
  8.   LinearScale,
  9.   PointElement,
  10.   LineElement,
  11.   Tooltip,
  12.   Legend
  13. } from 'chart.js'
  14. import { Scatter } from 'vue-chartjs'
  16. ChartJS.register(LinearScale, PointElement, LineElement, Tooltip, Legend)
  18. export default {
  19.     name: 'ScatterChart',
  20.     components: {
  21.         Scatter
  22.     },
  23.     props: {
  24.         homeTeam: Boolean,
  25.         playerStats: Array,
  26.     },
  27.     mounted() {
  29.     },
  30.     watch: {
  31.         playerStats() {
  32.             this.setDataSets();
  33.         }
  34.     },
  35.     methods: {
  36.         setDataSets() {
  37.             this.datasets = [];
  38.             this.playerStats.forEach(player => {
  39.                 let dataset = {
  40.                     label: player.player_name,
  41.                     data: [
  42.                         {
  43.                             x: player.attack,
  44.                             y: player.defense
  45.                         }
  46.                     ],
  47.                     backgroundColor: this.bgColor
  48.                 };
  49.                 this.datasets.push(dataset);
  50.             });
  51.         },
  52.     },
  53.     computed: {
  54.         chartData() {
  55.             return {
  56.                 datasets:
  57.                     this.datasets
  58.             }
  59.         },
  60.         chartOptions() {
  61.             return {
  62.                 responsive: true,
  63.                 maintainAspectRatio: false,
  64.                 scales: {
  65.                     x: {
  66.                         type: 'linear',
  67.                         position: 'bottom',
  68.                         title: {
  69.                             display: true,
  70.                             text: 'Attack',
  71.                         },
  72.                     },
  73.                     y: {
  74.                         type: 'linear',
  75.                         position: 'left',
  76.                         title: {
  77.                             display: true,
  78.                             text: 'Defense',
  79.                         },
  80.                     }
  81.                 },
  82.                 plugins: [
  83.                     {
  84.                         id: 'horizontalMedianLine',
  85.                         beforeDraw (chart) {
  86.                             console.log('horizontalMedianLine called');
  87.                             const yScale = chart.scales['y'];
  88.                             const xScale = chart.scales['x'];
  89.                             const ctx = chart.ctx;
  90.                             const yValue = yScale.getPixelForValue(1.25);
  91.                             const xValue = xScale.getPixelForValue(2.5);
  92.                             console.log('yValue:', yValue);
  93.                             console.log('xValue:', xValue);
  94.                             ctx.save();
  95.                             ctx.beginPath();
  96.                             ctx.moveTo(xScale.left, yValue);
  97.                             ctx.lineTo(xScale.right, yValue);
  98.                             ctx.moveTo(xValue, yScale.top);
  99.                             ctx.lineTo(xValue, yScale.bottom);
  100.                             ctx.setLineDash([5, 5]);
  101.                             ctx.strokeStyle = 'red';
  102.                             ctx.lineWidth = 2;
  103.                             ctx.stroke();
  104.                             ctx.restore();
  105.                         },
  106.                     },
  107.                 ],
  108.             }
  109.         },
  110.     },
  111.     data() {
  112.         return {
  113.             datasets: [],
  114.             bgColor: this.homeTeam ? 'rgb(255, 99, 132)' : 'rgb(54, 162, 235)',
  115.         }
  116.     },
  117. }
  118. </script>

因此，我希望在图表上看到两条线：

我做错了什么？请帮帮我

chart.js

1条答案

按热度按时间
g2ieeal7

g2ieeal71#

您放错了内联插件对象。它不应该在options下，而应该在用于构造图表的对象的顶层。
在您的设置中，指定插件的一种可能方法是声明一个计算方法chartPlugins：

  1. computed: {
  2.     chartData(){
  3.         return {
  4.             datasets: this.datasets,
  5.         };
  6.     },
  7.     chartPlugins(){
  8.         return [{
  9.             id: "horizontalMedianLine",
  10.             
  11.             beforeDraw(chart){
  12.                 //......
  13.             }
  14.         }]
  15.     }
  16. }

并在模板中使用：

  1. <template>
  2.   <Scatter
  3.     :style="{ height: '400px' }"
  4.     :plugins="chartPlugins"
  5.     :data="chartData"
  6.     :options="chartOptions"
  7.   />
  8. </template>

而且，你不需要一个插件来绘制这些线条;使用两个新的数据集来实现这一目标会更有效。这是水平的：

  1. methods: {
  2.     setDataSets(){
  3.         this.datasets = [];
  4.         chartConfig.playerStats.forEach((player) => {
  5.             //.......
  6.         });
  7.         const attack = this.playerStats.map(({attack}) => attack);
  8.         this.datasets.push({
  9.             borderColor: 'red',
  10.             showLine: true,
  11.             pointRadius: 0,
  12.             segment: {borderDash: [5, 5]},
  13.             data: [[Math.min(...attack), 1.25], [Math.max(...attack), 1.25]]
  14.         });
  15.     }
  16. }
展开查看全部
赞(0）分享  回复(0）举报  2023-04-30
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com