标签（空格分隔）： 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;
}
}
}
}
time
num
