如何创建 QChart.js 折线图

Posted 2023-02-16

【中文标题】如何创建 QChart.js 折线图

【英文标题】：How to create QChart.js Line Chart

【发布时间】：2019-02-13 18:19:38

【问题描述】：

我可以让QChart.js 毫无问题地使用饼图（以及极坐标图和圆环图），但每当我尝试创建折线图（以及雷达和条形图）时，我都会得到以下错误：

TypeError: Cannot read property 'length' of undefined

饼图的工作代码如下：

Chart 
    id: chart_line
    Layout.fillHeight: true
    Layout.fillWidth: true
    chartType: Charts.ChartType.PIE

    chartData: [
        value: 15, color: "#6AA84F",
        value:  3, color: "#DC3912",
        value:  5, color: "#FF9900"]

折线图的破代码如下：

Chart 
    id: chart_line
    Layout.fillHeight: true
    Layout.fillWidth: true
    chartType: Charts.ChartType.LINE

    chartData: [
        labels: ["January","February","March","April","May","June","July"],
         datasets: [ data: [65,59,90,81,56,55,40] ] 
    ]

我的理解是我没有正确加载chartData。我遇到问题的图表都是在QChartGallery.js 的声明中使用列表的图表。我对 javascript 不是特别熟悉，而且我的语法似乎有些问题，而且我找不到要澄清的文档。

【参考方案1】：

知道了，事实证明它和我想象的一样愚蠢。对于这些类型的图表，您需要更新Component.onCompleted 上的chartData。因此，将来遇到此问题的任何人的工作示例代码如下：

Chart 
    id: chart_line
    Layout.fillHeight: true
    Layout.fillWidth: true
    chartType: Charts.ChartType.LINE

    Component.onCompleted: 
        chartData = 
            labels: ["January","February","March","April","May","June","July"],
            datasets: [
                    data: [65,59,90,81,56,55,40]
                ]