12--Qt的chartView的面积图，x轴的数据格式发生改变

标签（空格分隔）： Qt

使用chartView的面积图，x轴一个对应的是value值，另一个是日期的切换。实现思想是使用两个ChartView，控制显隐来实现。

demo

import QtQuick 2.0
import QtCharts 2.2
import QtQuick.Controls 1.2

Rectangle {
   anchors.centerIn: parent;
   width: 680;
   height: 400;
   //    property var xdata: ["1","2","3","4","5","6","7","8","9","10"];
   property var xdata: ["1","2","3","4","5","6","7","8","9","10"];
   property var ydata: ["212","323","332","123","213","122","323","222","320","220"];
   property var num: 0;
   ChartView {
       id:oneChart;
       title: "Spline";
       anchors.left: parent.left;
       width: 600;
       height: 400;
       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;//网格线是否显示\
           visible: true;
       }
       ValueAxis {
           id: axisY;
           titleText: "EUR";
           //            min: Math.min.apply(null, ydata);
           //            max: Math.max.apply(null, ydata);
           min: 100;
           max: 446;
           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: line;
           }
           Component.onCompleted: {
               for (var i = 0; i < 10; i++)
               {
                   line.append(xdata[i],ydata[i]);

               }
           }
       }
   }
   ChartView {
       id:twoChart;
       title: "Spline1";
       anchors.left: parent.left;
       width: 600;
       height: 400;
       antialiasing: true;
       visible: false;
       theme: ChartView.ChartThemeLight;//设置主题 也可以用backgroundColor;
       DateTimeAxis {
           id: axisX1;
           format: "MM-dd"; //"yyyy MMM dd";HH:mm mm:ss
           tickCount: 12;
           min: new Date(new Date() - 11*24*60*60*1000);
           max: new Date()
           visible: true;
       }
       ValueAxis {
           id: axisY1;
           titleText: "EUR";
           min: 0;
           max: 125521;
           tickCount: ydata.length;
           labelFormat: "%.0f";
           labelsColor: "blue";//坐标轴上的字体颜色
       }
       AreaSeries {
           id:testArea1;
           axisX: axisX1;
           axisY: axisY1;
           color: "#188ff3";
           borderColor: "#FF0039A5";
           opacity: 0.3;
           borderWidth: 2;

           upperSeries: LineSeries {
               id: line1;
           }
           Component.onCompleted: {
               var xdata0=[1535599415349,1535685830371,1535772253268,1535858667013,1535945080692,1536031496597,1536204317157,1536297049449,1536383467802,1536469886586,1536470196618,1536556618618];
//                var ydata1 = [0,300,0,115,445,0,446,112,341,220,118,148];
               var ydata1 = [0,0,0,0,0,0,0,0,85896,125521,119448,43761]
               for (var i = 0; i < 12; i++)
               {
                   line1.append(xdata0[i],ydata1[i]);

               }

           }

       }


   }


   Button {
       id: changeBtn;
       width: 80;
       height: 30;
       anchors.left: twoChart.right;
       text: "换数据";
       onClicked: {
           num++;
           if(num % 2 ==0){
               console.log("I am  num ");
               twoChart.visible = false;
               oneChart.visible = true;
           }
           else if(num % 2 ==1){
               console.log("I am  time ");
               oneChart.visible = false;
               twoChart.visible = true;
           }
       }

   }




}