标签（空格分隔）： Qt
使用chartView实现触发x轴y轴显示相应的坐标信息
demo
import QtQuick 2.9
import QtCharts 2.2
Rectangle {
width: 1000;
height: 400;
color: "skyblue"
property var xdata: [1,2,3,4,5,6,7,8,9,10,11,12];
property var ydata: [300,220,115,445,112,446,100,341,220,118,148, 200];
property real oneMouseH: 0;
property real oneMouseW: 0;
property real xtip: 0; //浮动显示的x，y提示值
property real ytip: 0; //浮动显示的x，y提示值
property var realTimeArray: new Array;
property bool bShowTip: false;
property int tipRectW: 150;
property int tipRectH: 36;
property int tipRectLeftMargin: 5;
property int tipRectTopMargin: 5;
function updateChart()
{
axisY.max = Math.max.apply(null, ydata);
axisY.min = Math.min.apply(null, ydata);
for (var i = 0; i < 11; i++)
{
line.append(xdata[i],ydata[i]);
}
}
//
function getPositionValue(pointX, pointY)
{
var tempx, tempy;
if(xdata.length > 0)
{
tempx = xdata[0];
tempy = ydata[0];
ytip = ydata[0];
xtip = ydata[0];//(realTimeArray[0] === undefined ? 0 : realTimeArray[0]);
var i;
for(i = 1; i < xdata.length; i++)
{
if(Math.abs(pointX - xdata[i]) < Math.abs(pointX - tempx))
{ //var j = i-1;
tempx = xdata[i];
tempy = ydata[i];
//print("yOrdinate===========", yOrdinate, i, realTimeArray[i])
}
}
//利用当前的值映射出坐标，然后画出两条线
var mapPoint = achartview.mapToPosition(Qt.point(tempx, tempy), testArea);
//获取提示窗口出现的位置
getTipPosFun(mapPoint);
oneMouseH = mapPoint.y;
oneMouseW = mapPoint.x;
xtip = tempx;
ytip = tempy;
}
}
function getTipPosFun(onePoint)
{
//最常见的时候都是处于1：左上
tipRectLeftMargin = onePoint.x - tipRectW - 5;
tipRectTopMargin = onePoint.y - tipRectH - 5;
print("tipRectPosArray--------", onePoint, tipRectLeftMargin, tipRectTopMargin)
if(tipRectLeftMargin < 20) //右上的位置
{
tipRectLeftMargin = onePoint.x + 5
}
if(onePoint.y - tipRectH < 20) //右下或者左下
{
tipRectTopMargin = onePoint.y + 5;
}
}
ChartView {
id: achartview
anchors.fill: parent;
//plotAreaColor: "#3c3f45"
legend.visible: false
legend.alignment: Qt.AlignBottom
antialiasing: true;
dropShadowEnabled: true
backgroundColor: "#444851"
//backgroundRoundness: 20
animationOptions: ChartView.SeriesAnimations
//count: 2
theme: ChartView.ChartThemeQt;//设置主题 也可以用backgroundColor;
// DateTimeAxis {
// id: axisX;
// format: "HH:mm"; //"yyyy MMM dd";HH:mm mm:ss
// tickCount: 12;
// // min : Date.fromLocaleString(Qt.locale(), "2018-05-09 8:00:00", "yyyy-MM-dd hh:mm:ss");
// // max : Date.fromLocaleString(Qt.locale(), "2018-09-17 20:00:00", "yyyy-MM-dd hh:mm:ss");
// min: new Date(new Date() - 11*24*60*60*1000);
// max: new Date();
// }
ValueAxis {
id: axisX;
min: xdata[0];
max: xdata[xdata.length - 1];
tickCount: 5;
minorTickCount: 5;
labelFormat: "%.0f";
labelsColor: "#999999";//坐标轴上的字体颜色
gridLineColor: "#3c3f45"
color: "#3c3f45"
minorGridLineColor: "#3c3f45"
}
ValueAxis {
id: axisY;
min: 100;
max: 446;
tickCount: ydata.length;
labelFormat: "%.0f";
labelsColor: "#999999";//坐标轴上的字体颜色
gridLineColor: "#3c3f45"
color: "#3c3f45"
}
AreaSeries {
id:testArea;
axisX: axisX;
axisY: axisY;
color: "#0ddeff";
borderColor: "#1699ae";
opacity: 0.3;
borderWidth: 3;
pointLabelsClipping: false
useOpenGL: false
upperSeries: LineSeries {
id: line;
}
Component.onCompleted: {
updateChart();
}
}
MouseArea {
id: chartArea;
anchors.fill: parent;// parent;//
// focus:true;
hoverEnabled:true;
Keys.enabled: true;
Keys.onPressed: {
}
onEntered: {
bShowTip = true;
}
onPositionChanged: {
var xmin = achartview.mapToValue(Qt.point(mouseX, mouseY), testArea)
print("xmin==========", xmin)
getPositionValue(xmin.x, xmin.y)
print("xxxxxxxxxxxxxx----onPositionChanged------", mouseX, mouseY)
}
onExited: {
bShowTip = false;
}
Rectangle{
id: oneline;
anchors.top: parent.top;
anchors.topMargin: oneMouseH;
anchors.left: parent.left
anchors.leftMargin: 30;
anchors.right: parent.right
anchors.rightMargin: 30;
height: 1;
color: "red";
visible: bShowTip;
}
Rectangle{
id: twoline;
anchors.top: parent.top;
anchors.topMargin: 30;
anchors.bottom: parent.bottom
anchors.bottomMargin: 30;
anchors.left: parent.left;
anchors.leftMargin: oneMouseW
width: 1
color: "red";
visible: bShowTip;
}
Rectangle{
id: tipRect;
anchors.left: parent.left;
anchors.leftMargin: tipRectLeftMargin;
anchors.top: parent.top;
anchors.topMargin: tipRectTopMargin;
width: tipRectW;
height: tipRectH;
color: "#1690f5"
border.color: "#d5d5d5"
visible: bShowTip;
//oneLeft + 3 , oneTop + 15
Text{
id: ytext;
anchors.left: parent.left;
anchors.leftMargin: 3;
anchors.top: parent.top;
anchors.topMargin: 2;
text: "y: " + ytip
color: "#d5d5d5"
font.family: "微软雅黑";
font.pixelSize: 13;
}
Text{
id: xtext;
anchors.left: parent.left;
anchors.leftMargin: 3;
anchors.top: parent.top;
anchors.topMargin: 17;
text: "x: " + xtip;
color: "#d5d5d5"
font.family: "微软雅黑";
font.pixelSize: 13;
}
}
}
}
}
x和y轴触发
