如何在QML中使用List数据绘制LineSeries折线图？

你原来的代码无效是因为XYPoint只能定义单个数据点，不能直接绑定整个数组。要把两个列表的对应元素作为坐标点绘制折线，有两种常用方法：

方法1：用Repeater动态生成XYPoint #

利用Repeater遍历列表索引，逐个生成对应的数据点，适合列表长度固定的场景：

import QtQuick 2.9
import QtQuick.Window 2.2
import QtCharts 2.0

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
    var list1 = [1,2,3,4,5,6,7]
    var list2 = [11,12,13,14,15,16,17]

    ChartView {
        anchors.fill: parent
        legend.visible: false
        
        LineSeries {
            Repeater {
                model: list1.length
                XYPoint {
                    x: list1[index]
                    y: list2[index]
                }
            }
        }
    }
}

方法2：用JavaScript动态添加数据点 #

通过Component.onCompleted事件遍历列表，调用append()方法逐个添加点，适合需要动态修改数据的场景：

import QtQuick 2.9
import QtQuick.Window 2.2
import QtCharts 2.0

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
    var list1 = [1,2,3,4,5,6,7]
    var list2 = [11,12,13,14,15,16,17]

    ChartView {
        anchors.fill: parent
        legend.visible: false
        
        LineSeries {
            id: lineSeries
            Component.onCompleted: {
                for(let i=0; i<list1.length; i++){
                    lineSeries.append(list1[i], list2[i])
                }
            }
        }
    }
}

两种方法都能实现将list1和list2的对应元素作为(x,y)坐标点，绘制出完整的折线图。

内容的提问来源于stack exchange，提问作者Jeyanth Inba