08--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"];
    property int num: 0;
    ChartView {
        id:tetView;
        title: "Spline";
        anchors.left: parent.left;
        width: 500;
        height: 400;
        antialiasing: true;
        ValueAxis {
            id: axisX;
            min: xdata[0];
            max: xdata[6];
            tickCount: xdata.length;
            labelFormat: "%.0f";
            visible: false;
        }

        ValueAxis {
            id: axisY;
            titleText: "EUR";
            min: ydata[0];
            max: ydata[6];
            tickCount: ydata.length;
            labelFormat: "%.0f";
            visible: false;
        }
        AreaSeries {
            id:areaGraph;
            name: "Russian";
            axisX: axisX;
            axisY: axisY;
            color: "skyblue";
            borderColor: "#FF0039A5";
            opacity: 0.4;
            borderWidth: 2;
            visible: false;
            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] }
            }
        }
        BarSeries {
            id: barGraph;
            visible: false;
//            axisX: BarCategoryAxis { categories: ["2007", "2008", "2009", "2010", "2011", "2012" ] }
//            BarSet { label: "Bob"; values: [2, 2, 3, 4, 5, 6] }
             axisX: BarCategoryAxis { categories: xdata }
             BarSet { label: "Bob"; values: ydata }
        }
        Component.onCompleted: {
//            axisX.visible = true;
            axisY.visible = true;
            areaGraph.visible = true;
        }
        Button {
            id: changeBtn;
            width: 80;
            height: 30;
            anchors.left: parent.right;
            text: "面积图";
            onClicked: {
                console.log("加载柱状图");
                num++;
                console.log("num==="+num);
                if(num % 2 == 0){ //加载曲线图
                    barGraph.visible = false;
//                    axisX.visible = true;
                    axisY.visible = true;
                    areaGraph.visible = true;
                    changeBtn.text = "面积图";
                }
                else{//加载柱状图
                    axisX.visible = false;
                    axisY.visible = false;
                    areaGraph.visible = false;
                    barGraph.visible = true;
                    changeBtn.text = "柱状图";
                }
            }
        }
    }
}

切换成面积图

切换成柱状图