使用 vue-chartjs 在单个组件上绘制多个折线图

Question

I am trying to implement 3 line charts on single component using vue-chartjs but only 3rd chart is loading I have followed this official example for Vue 2 charts

What I have been trying to archive is shown in this image

Here's how I am trying to archive it.

LineChart Component

<template>
<LineChartGenerator
    :chart-id="chartID"
    :chart-options="chartOptions"
    :chart-data="chartData"
/>
</template>

<script>
 import { Line as LineChartGenerator } from "vue-chartjs/legacy";
 import {
 Chart as ChartJS,
  Title,
  Tooltip,
  Legend,
  LineElement,
  LinearScale,
  CategoryScale,
  PointElement,
 } from "chart.js";

 ChartJS.register(
  Title,
  Tooltip,
  Legend,
  LineElement,
  LinearScale,
  CategoryScale,
  PointElement
 );

 export default {
    name: "LineChart",
    components: {
      LineChartGenerator,
     },
    props: ["chartData", "chartOptions", "chartID"],
  };
</script>

Overview Component

<template>
  <div>
     <div class="chart-div">
        <h4 class="chart-title m-2">
             Top Searches Results
        </h4>
        <div class="chart-box">
            <line-chart
                :chartID="'top-searches'"
                :style="chartStyle"
                :chartData="chartDataTop"
                :chartOptions="chartOptionsTop"
             />
         </div>
       </div>
       <div class="chart-div">
            <h4 class="chart-title m-2">
                Zero Results Overview
            </h4>
            <div class="chart-box">
                 <line-chart
                 :chartID="'zero-searches'"
                 :style="chartStyle"
                 :chartData="chartDataZero"
                 :chartOptions="chartOptionsZero"
             />
        </div>
       </div>
       <div class="chart-div">
             <h4 class="chart-title m-2">Overview</h4>
               <div class="chart-box">
                <line-chart
                   :chartID="'overview-searches'"
                   :style="chartStyle"
                   :chartData="chartDataOverview"
                   :chartOptions="chartOptionsOverview"
                  />
                </div>
            </div>
  </div>
</template>
<script>
 import LineChart from "../charts/LineChart";
 export default {
   components: { LineChart },

   data(){return {

          chartDataTop: {
            labels: [
                "01:00",
                "02:00",
                "03:00",
                "04:00",
                "05:00",
                "06:00",
                "07:00",
                "08:00",
                "09:00",
                "10:00",
            ],
            datasets: [
                {
                    label: "Orders",
                    data: [10, 20, 15, 30, 50, 20, 30, 10, 20, 30],
                    lineTension: 0.6,
                    backgroundColor: "#3E80E1",
                    borderColor: "#3E80E1",
                    pointRadius: 3,
                },
            ],
        },
        chartOptionsTop: {
            responsive: true,
            legend: {
                display: false,
            },
            maintainAspectRatio: false,
            plugins: {
                legend: false,
                datalabels: {
                    display: false,
                },
            },
            scales: {
                x: {
                    grid: {
                        color: "rgba(217,143,7,0.1)",
                    },
                },
                y: {
                    grid: {
                        display: false,
                    },
                },
            },
        },
        chartDataZero: {
            labels: [
                "01:00",
                "02:00",
                "03:00",
                "04:00",
                "05:00",
                "06:00",
                "07:00",
                "08:00",
                "09:00",
                "10:00",
            ],
            datasets: [
                {
                    label: "Orders",
                    data: [10, 20, 15, 30, 50, 20, 30, 10, 20, 30],
                    lineTension: 0.6,
                    backgroundColor: "#3E80E1",
                    borderColor: "#3E80E1",
                    pointRadius: 3,
                },
            ],
        },
        chartOptionsZero: {
            responsive: true,
            legend: {
                display: false,
            },
            maintainAspectRatio: false,
            plugins: {
                legend: false,
                datalabels: {
                    display: false,
                },
            },
            scales: {
                x: {
                    grid: {
                        color: "rgba(217,143,7,0.1)",
                    },
                },
                y: {
                    grid: {
                        display: false,
                    },
                },
            },
        },
       chartDataOverview: {
            labels: [
                "01:00",
                "02:00",
                "03:00",
                "04:00",
                "05:00",
                "06:00",
                "07:00",
                "08:00",
                "09:00",
                "10:00",
            ],
            datasets: [
                {
                    label: "Orders",
                    data: [10, 20, 15, 30, 50, 20, 30, 10, 20, 30],
                    lineTension: 0.6,
                    backgroundColor: "#3E80E1",
                    borderColor: "#3E80E1",
                    pointRadius: 3,
                },
            ],
        },
        chartOptionsOverview: {
            responsive: true,
            legend: {
                display: false,
            },
            maintainAspectRatio: false,
            plugins: {
                legend: false,
                datalabels: {
                    display: false,
                },
            },
            scales: {
                x: {
                    grid: {
                        color: "rgba(217,143,7,0.1)",
                    },
                },
                y: {
                    grid: {
                        display: false,
                    },
                },
            },
        },


   }}
 }
</script>

Only Overview chart is loading and not getting any error tried googling but no use

Answer 1

Do you have any errors in console(other then "TypeError: Reflect.getPrototypeOf called on non-object" as documented here )?

Here is working example with your code copy pasted(except for location of LineChart component got changed from ../charts/LineChart to ./charts/LineChart

https://codesandbox.io/s/thirsty-rain-2e5t54