如何创建 QChart.js 折线图

Question

我能够 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 不是特别熟悉，似乎我的语法有些问题，我找不到文档来澄清。

Answer 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]
                }]
        }
    }
}

如何创建 QChart.js 折线图

How to create QChart.js Line Chart

javascript

qt

qml

qtquick2

qtquickcontrols2