07--Qt的chartView的动态数据加载以及属性说明

标签（空格分隔）： Qt

使用chartView实现面积图，并且能够动态的加载数据

demo

import QtQuick 2.0
import QtCharts 2.2
import QtQuick.Controls 1.2
Rectangle {
    anchors.centerIn: parent;
    width: 600;
    height: 400;
    property var xdata: ["2011","2012","2013","2014","2015","2016","2017"];
    property var ydata: ["212","323","332","123","213","122","125","233"];
    ChartView {
        id:tetView;
        title: "Spline";
        anchors.left: parent.left;
        width: 500;
        height: 400;
        antialiasing: true;
        theme: ChartView.ChartThemeLight;//设置主题 也可以用backgroundColor;
        animationOptions: ChartView.SeriesAnimations;//开启动画
        ValueAxis {
            id: axisX;
            min: xdata[0];
            max: xdata[6];
            tickCount: xdata.length;
            labelFormat: "%.0f";//labelFormat: "%2.0f:00" 时间点  08:00
        }
        ValueAxis {
            id: axisY;
            titleText: "EUR";
            min: ydata[0];
            max: ydata[6];
            tickCount: ydata.length;
            labelFormat: "%.0f";
            gridLineColor: "grey";//网格线的颜色
            gridVisible: false;//网格线是否显示
            labelsColor: "blue";//坐标轴上的字体颜色
        }
        AreaSeries {
            id:testArea;
            name: "Russian";
            axisX: axisX;
            axisY: axisY;
            color: "skyblue";
            borderColor: "#FF0039A5";
            opacity: 0.4;
            borderWidth: 2;
            upperSeries: LineSeries {
                id: stateUpper;
                XYPoint { x: xdata[0]; y: ydata[0] }
                XYPoint { x: xdata[1]; y: ydata[1] }
                XYPoint { x: xdata[2]; y: ydata[2] }
                XYPoint { x: xdata[3]; y: ydata[3] }
                XYPoint { x: xdata[4]; y: ydata[4] }
                XYPoint { x: xdata[5]; y: ydata[5] }
                XYPoint { x: xdata[6]; y: ydata[6] }
            }
        }
        Component.onCompleted: {
            console.log("xdata====="+xdata,"ydata======"+ydata);
        }
        Button {
            id: clearBtn;
            width: 60;
            height: 30;
            anchors.left: parent.right;
            text: "清除";
            onClicked: {
                stateUpper.clear();
            }

        }
        Button {
            id: addBtn;
            width: 60;
            height: 30;
            anchors.left: clearBtn.left;
            anchors.top: clearBtn.bottom;
            text: "加载";
            onClicked: {
                console.log(111);
                for(var i= 0; i<=4;i++){
                    console.log("xdata[i],ydata[i]",xdata[i],ydata[i]);
                    stateUpper.append(xdata[i],ydata[i]);
                }
            }
        }
    }
}