美文网首页
09--Qt的chartView的柱状图分别赋x和y值

09--Qt的chartView的柱状图分别赋x和y值

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

标签(空格分隔): Qt


使用chartView实现柱状图分别赋x和y值

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: [];
    property var ydata: [];
    ChartView {
        id:tetView;
        title: "Spline";
        anchors.left: parent.left;
        width: 500;
        height: 400;
        antialiasing: true;

        BarSeries {
            id: barGraph;
            labelsVisible: true;//柱状图显示每个数据
            labelsPosition: AbstractBarSeries.LabelsInsideEnd;

             axisX: BarCategoryAxis {
                 categories:xdata;
                 labelsColor: "green";//x轴字体颜色
             }
             axisY: ValueAxis {
                 labelsColor: "red";//y轴字体颜色
             }

//             BarSet {
//                 label: "Bob";
//                 values: ydata0;//y刻度线的值
//             }
             Component.onCompleted: {
                 console.log("柱状图加载完成");
                 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.axisY==="+JSON.stringify(barGraph.axisY));
                 axisY.max = Math.max.apply(null, ydata);//最大值
                 axisY.min =Math.min.apply(null, ydata);//最小值
             }
        }
    }
}
x,y分别赋值

相关文章

网友评论

      本文标题:09--Qt的chartView的柱状图分别赋x和y值

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