美文网首页
10--Qt的chartView的柱状图属性说明以及y轴正常显示

10--Qt的chartView的柱状图属性说明以及y轴正常显示

作者: lvyweb | 来源:发表于2018-09-14 09:00 被阅读27次

    标签(空格分隔): 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: ["1","2","3","4","5","6","7"];
        property var ydata: ["1","100","200","300","400","500","600"];
        ChartView {
            id:tetView;
            title: "Spline";
            anchors.left: parent.left;
            width: 500;
            height: 400;
            antialiasing: true;
    
            BarSeries {
                id: barGraph;
                labelsVisible: true;//柱状图显示每个数据
                labelsPosition: AbstractBarSeries.LabelsInsideEnd;
                opacity:0.3;
                 axisX: BarCategoryAxis {
                     categories:xdata;
                     labelsColor: "green";//x轴字体颜色
                 }
                 axisY: ValueAxis {
                     id:axisY1;
                     labelsColor: "red";//y轴字体颜色
                 }
    
    //             BarSet {
    //                 label: "Bob";
    //                 values: ydata0;//y刻度线的值
    //             }
                  BarSet {
                      label: "test";
                      values: ydata;
                      color: "green";
                  }
                 Component.onCompleted: {
                     console.log("柱状图加载完成");
                 }
            }
            Button {
                id: changeBtn;
                width: 80;
                height: 30;
                anchors.left: parent.right;
                text: "换数据";
                onClicked: {
                    barGraph.clear();
                    xdata =  ["2011","2012","2013","2014","2015","2016","2017"];
                    ydata =  ["1","2","3","4","5","6","7"];
                    barGraph.axisX.categories=xdata;//x轴的值
    //                 barGraph.insert(0, "label",ydata) //y轴数据
                    barGraph.append("21",ydata);//y轴数据
                    console.log("barGraph==="+JSON.stringify(barGraph));
                    axisY1.max = Math.max.apply(null, ydata);//最大值
                    axisY1.min =Math.min.apply(null, ydata);//最小值
                }
            }
        }
    
    }
    
    
    
    柱状图动态加载图

    相关文章

      网友评论

          本文标题:10--Qt的chartView的柱状图属性说明以及y轴正常显示

          本文链接:https://www.haomeiwen.com/subject/japngftx.html