Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >vue-chartjs无法呈现线状图

vue-chartjs无法呈现线状图
EN

Stack Overflow用户
提问于 2021-05-06 22:30:55
回答 2查看 4.2K关注 0票数 2

MyChart.vue

代码语言:javascript
运行
AI代码解释
复制
<template>
  <v-container>
    <v-card elevation="2">
      <v-card-title>AQI Comparison</v-card-title>
      <line-chart :chart-data="datacollection"></line-chart>
    </v-card>
  </v-container>
</template>

<script>
import LineChart from "./LineChart.js";

export default {
  name: "AQIChartComponent",
  components: {
    LineChart
  },
  data() {
    return {
      datacollection: {
        labels: [
          "week 1",
          "week 2",
          "week 3",
          "week 4",
          "week 5",
          "week 6",
          "week 7",
          "week 8",
          "week 9",
          "week 10",
        ],
        datasets: [
          {
            data: [86, 114, 106, 106, 107, 111, 133, 221, 783, 2478],
            label: "Africa",
            borderColor: "#3e95cd",
            fill: false,
          },
          {
            data: [282, 350, 411, 502, 635, 809, 947, 1402, 3700, 5267],
            label: "Asia",
            borderColor: "#8e5ea2",
            fill: false,
          },
          {
            data: [168, 170, 178, 190, 203, 276, 408, 547, 675, 734],
            label: "Europe",
            borderColor: "#3cba9f",
            fill: false,
          },
          {
            data: [40, 20, 10, 16, 24, 38, 74, 167, 508, 784],
            label: "Latin America",
            borderColor: "#e8c3b9",
            fill: false,
          },
          {
            data: [6, 3, 2, 2, 7, 26, 82, 172, 312, 433],
            label: "North America",
            borderColor: "#c45850",
            fill: false,
          },
        ],
      }
    };
  }
};
</script>

LineChart.js

代码语言:javascript
运行
AI代码解释
复制
import { Line, mixins } from 'vue-chartjs'
const { reactiveProp } = mixins

export default {
  extends: Line,
  mixins: [reactiveProp],
  props: ['options'],
  mounted () {
    // this.chartData is created in the mixin.
    // If you want to pass options please create a local options object
    this.renderChart(this.chartData, this.options)
  }
}

我得到以下错误:

代码语言:javascript
运行
AI代码解释
复制
[Vue warn]: Error in mounted hook: "TypeError: chart_js__WEBPACK_IMPORTED_MODULE_0__.default is not a constructor"

found in

---> <LineChart>
       <VCard>
         <AQIChartComponent> at src/components/AQIChartComponent.vue
           <AQIComponent> at src/components/AQIComponent.vue
             <VMain>
               <VApp>
                 <App> at src/App.vue
                   <Root>

TypeError: chart_js__WEBPACK_IMPORTED_MODULE_0__.default is not a constructor

我甚至将属性从:chartData更改为:chartData,但其错误相同。我正在使用他们的文档中的示例代码,我在这里做错了什么?

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2021-05-06 22:57:43

首先,将您的chart.js版本更新为2。您可以通过执行以下命令来做到这一点。

代码语言:javascript
运行
AI代码解释
复制
npm install chart.js@2

将图表选项与数据一起发送。就像这样。

代码语言:javascript
运行
AI代码解释
复制
<template>
  <v-container>
    <v-card elevation="2">
      <v-card-title>AQI Comparison</v-card-title>
      <line-chart
        :chart-data="datacollection"
        :options="chartOptions"
      ></line-chart>
    </v-card>
  </v-container>
</template>

并将图表选项数据与datacollection变量一起添加到脚本中。就像这样。

代码语言:javascript
运行
AI代码解释
复制
<script>
import LineChart from "./LineChart.js";

export default {
  name: "AQIChartComponent",
  components: {
    LineChart,
  },
  data() {
    return {
      datacollection: {
        labels: [
          "week 1",
          "week 2",
          "week 3",
          "week 4",
          "week 5",
          "week 6",
          "week 7",
          "week 8",
          "week 9",
          "week 10",
        ],
        datasets: [
          {
            data: [86, 114, 106, 106, 107, 111, 133, 221, 783, 2478],
            label: "Africa",
            borderColor: "#3e95cd",
            fill: false,
          },
          {
            data: [282, 350, 411, 502, 635, 809, 947, 1402, 3700, 5267],
            label: "Asia",
            borderColor: "#8e5ea2",
            fill: false,
          },
          {
            data: [168, 170, 178, 190, 203, 276, 408, 547, 675, 734],
            label: "Europe",
            borderColor: "#3cba9f",
            fill: false,
          },
          {
            data: [40, 20, 10, 16, 24, 38, 74, 167, 508, 784],
            label: "Latin America",
            borderColor: "#e8c3b9",
            fill: false,
          },
          {
            data: [6, 3, 2, 2, 7, 26, 82, 172, 312, 433],
            label: "North America",
            borderColor: "#c45850",
            fill: false,
          },
        ],
      },
      chartOptions: {
        responsive: true,
        legend: {
          display: false,
        },
        tooltips: {
          titleFontSize: 20,
          bodyFontSize: 25,
        },
        scales: {
          xAxes: [],
          yAxes: [
            {
              ticks: {
                beginAtZero: false,
              },
            },
          ],
        },
      },
    };
  },
};
</script>
票数 2
EN

Stack Overflow用户

发布于 2021-05-06 23:08:48

从错误来看,我认为在vue-chartjs和chart.js之间是一个不兼容的问题。

vue-chartjs自2020年12月以来就没有更新过。

你能试着把chart.js降到2.9.4吗?我认为它将解决构造函数问题。

代码语言:javascript
运行
AI代码解释
复制
"chart.js": "2.9.4",
"vue-chartjs": "3.5.1",

我在codesandbox中创建了一个很小的示例,它使用您提供的代码。

https://codesandbox.io/s/distracted-galileo-r3lec?file=/package.json:378-401

附注:

如果您想拥有一个更新图表库,您可以查看顶级图表https://github.com/apexcharts/vue-apexcharts

票数 6
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/67430001

复制
相关文章
Spark Scala当中reduceByKey(_+_) reduceByKey((x,y) => x+y)的用法
reduceByKey(_+_)是reduceByKey((x,y) => x+y)的一个 简洁的形式 */ val rdd08 = sc.parallelize(List((1, 1), (1, 4),(1, 3), (3, 7), (3, 5))) val rdd08_1 = rdd08.reduceByKey((x, y) => x + y) println("reduceByKey 用法 " + rdd08_1.collect().mkString(",")) sc.stop() } def myunion(rdd05: RDD[Int], rdd06: RDD[Int]): Unit = { val res: RDD[Int] = rdd05.union(rdd06)
马克java社区
2019/07/20
1.9K0
Spark Scala当中reduceByKey(_+_) reduceByKey((x,y) => x+y)的用法
求z=x-y的概率密度_X和Y独立同分布
总结过一次,一般方法是可以由分布函数再求导得到概率密度,计算一定更要小心才能得到正确的解。
全栈程序员站长
2022/11/02
1.7K0
求z=x-y的概率密度_X和Y独立同分布
R语言建模入门:如何理解formula中y~.和y~x:z的含义?
背景:2019年的某月末日,三路人开局,兴趣所致组建了“花儿少年”:一个有组织、有纪律的R语言入门交流学习组织。自此,开启了一段小白&大师的成长史。
拴小林
2020/07/10
8.2K0
X电容与Y电容
X电容和Y电容统称为安规电容,安规电容即经过安全认证的电容,经过国家权威机构检验测试通过的交流电容,产品有各国认证标志。失效后,不会导致电击,不危及人身安全。
徐师兄
2022/08/29
1.1K0
X电容与Y电容
为python(x,y)安装python
为了给我的python(x,y) 2.7.10安装xlwt包,在windows的命令行界面执行如下命令即可:
py3study
2020/01/08
8430
为python(x,y)安装python
前任de密码:(x^2+y^2-1)^3+x^2*y^3
正要下班,前任发来一串代码。按照一贯的尿性来看,这应该是TMD发错了。但鉴于今天日期特殊,仔细思考了一下好像不太对。
xjjdog
2021/05/27
4830
递归的练习1:求x的y次方
#include<iostream> using namespace std; //递归案例:计算x的y次方 //x:底数 y:次方 int test(int x, unsigned int y) { if (y == 0) { return 1; } //递归结束条件 if (y == 1) { return x; } return x*test(x, y-1); } int main() { cout << test(2,3) << endl; system("paus
大忽悠爱学习
2021/03/07
9700
C语言:定义一个计算两个整数的和的函数int sum(int a,int b),在主函数中输入两个整数x和y,调用sum(x,y)输出x+y的和。
最近也没学python,倒是忙着写起了C语言作业,我也分享一下我的作业吧,希望对大家有用。 我就不想分析了,直接上代码好吗?有问题留言好吧。 关注我,我是川川,计算机大二菜鸟,有问题可以找我,一起交流。QQ:2835809579
川川菜鸟
2021/10/18
5.2K0
求延长线坐标 已知 点1的(x1,y1) 点2的(x2,y2) 求点3的x3求y3或者 点3的y3求x3
求延长线坐标 已知 点1的(x1,y1) 点2的(x2,y2) 求点3的x3求y3或者 点3的y3求x3
不要方要圆
2023/03/16
8220
Skill语言实现将一个table中的坐标point(x,y)按照x和y进行从小到大排序的函数
/***************** 对table中的point进行排序,按照type值将x或者y从小到大排 *******************/ defun(TableSort (table type) table_len=length(table) let((sortedTable) sortedTable=makeTable("table") for(i 0 table_len-1 sortedTable[i]=table[i] ) for(i 0 table_len-2
黑马Amos
2023/03/21
8030
2022-06-29:x = { a, b, c, d },y = { e, f, g, h },x、y两个小数组长度都是4。如
[左神java代码](https://github.com/algorithmzuo/weekly-problems/blob/main/src/class_2022_04_2_week/Code06_PerfectPairNumber.java)
福大大架构师每日一题
2023/06/08
2450
2022-06-29:x = { a, b, c, d },y = { e, f, g, h },x、y两个小数组长度都是4。如
条件分布_Y关于X的条件分布律
给定另一随机变量Y的随机变量X的条件分布是当观察到Y取某一值时X的分布。 虽然涉及精确的数学定义,但对于离散和连续变量,它等于将X和Y的联合PDF或PMF除以Y的PDF或PMF。
全栈程序员站长
2022/09/20
7210
Echarts折线图的x和y轴坐标颜色修改
继续对Echarts的属性进行探索,关于如何修改Echarts的x和y轴坐标颜色的问题,继续看,主要修改代码的地方:
王小婷
2019/08/20
7K0
gmap构建离线地图,用createCustomerTiledLayer方法,瓦片地址尾部多了 ?x={x}&y={y}&z&{
gmap构建离线地图,用createCustomerTiledLayer方法,瓦片地址尾部多了 ?x={x}&y={y}&z&{z} 导致无法显示地图。 function initMap(
福大大架构师每日一题
2023/07/09
3390
gmap构建离线地图,用createCustomerTiledLayer方法,瓦片地址尾部多了 ?x={x}&y={y}&z&{
从Y = X到构建完整的人工神经网络
在某些时候,你也许曾问过自己,人工神经网络的参数的来源是什么?权重的目的是什么?如果不用偏差(bias)会怎样?
AI研习社
2019/07/15
5190
从Y = X到构建完整的人工神经网络
「R」ggplot2 修改x和y轴刻度
这个R tutorial描述如何使用ggplot2包修改x和y轴刻度。同样,该文包含如何执行轴转换(对数化,开方等)和日期转换。
王诗翔呀
2020/07/02
9.9K0
「R」ggplot2 修改x和y轴刻度
17*x^2-16*abs(x)*y+17*y^2-225=0公式画爱心。
1、点击[命令行窗口] 2、按<Enter>键
裴来凡
2022/05/28
5830
17*x^2-16*abs(x)*y+17*y^2-225=0公式画爱心。
matlab绘制figure的x y轴特殊标签数据
做数据分析的Matlab用户最常见的问题之一是如何在日期轴上绘制数据。很多时候,分析师最初会使用Excel处理数据,然后用相应的工具去处理数据,分析数据。Excel有一种在日期轴上绘制数据的简单方法,但在Matlab中使用日期轴需要麻烦一点。但matlab针对这种特殊情况也有对应的一些函数,使用Matlab完成这项任务并不难,而且和大多数Matlab函数一样,它具有相当大的通用性。
用户9925864
2022/12/16
3.1K0
matlab绘制figure的x y轴特殊标签数据
sum(x) over( partition by y ORDER BY z ) 分析
1. 从最简单的开始   sum(...) over( ),对所有行求和   sum(...) over( order by ... ),和 = 第一行 到 与当前行同序号行的最后一行的所有值求和,文字不太好理解,请看下图的算法解析。 with aa as( SELECT 1 a,1 b, 3 c FROM dual unionSELECT 2 a,2 b, 3 c FROM dual unionSELECT 3 a,3 b, 3 c FROM dual unionSELECT 4 a,4 b, 3 c
java达人
2018/01/31
1.2K0
sum(x) over( partition by y ORDER BY z ) 分析
开发 | 从Y = X到构建完整的人工神经网络
在某些时候,你也许曾问过自己,人工神经网络的参数的来源是什么?权重的目的是什么?如果不用偏差(bias)会怎样?
AI科技评论
2019/07/12
5510
开发 | 从Y = X到构建完整的人工神经网络

相似问题

R:‘xy.coords(x,y)中的错误:'x’和'y‘长度不同

11

Xy.coords中的错误(x,y,xlabel,ylabel,log):'x‘和'y’长度不同

12

如何解决这个绘图错误(在xy.coords(x,y,x标签,y标签,日志中的错误):'x‘和'y’长度不同)?

10

xy.coords(x,y,xlabel,ylabel,log)中出错:'x‘和'y’长度不同

20

R: xy.coords(x,y,xlabel,ylabel,log)出错:'x‘和'y’长度不同

11
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档