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

标签（空格分隔）： Qt

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

demo

import QtQuick 2.0
import QtCharts 2.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","323","222"];
    ChartView {
        title: "Spline";
        anchors.fill: parent;
        antialiasing: true;
        theme: ChartView.ChartThemeLight;//设置主题 也可以用backgroundColor;
        ValueAxis {
            id: axisX;
            min: xdata[0];
            max: xdata[xdata.length-1];
            tickCount: xdata.length;
            labelFormat: "%.0f";//设置x轴的数据类型
//            visible: true;//是否显示x轴坐标
            gridLineColor: "grey";//网格线的颜色
            gridVisible: false;//网格线是否显示
        }
        ValueAxis {
            id: axisY
            titleText: "EUR"
            min: Math.min.apply(null, ydata);
            max: Math.max.apply(null, ydata);
            tickCount: ydata.length;
            labelFormat: "%.0f";
            labelsColor: "blue";//坐标轴上的字体颜色
        }
        AreaSeries {
            id:testArea;
            axisX: axisX;
            axisY: axisY;
            color: "#188ff3";
            borderColor: "#FF0039A5";
            opacity: 0.3;
            borderWidth: 2;
            upperSeries: LineSeries {
                id: stateUpper;
            }
        }
        Component.onCompleted: {
            for(var i = 0;i<=7;i++){
                stateUpper.append(xdata[i],ydata[i]);
            }
        }
    }
}