QML BarSeries 中的 y 轴最大值未更新
y-Axis Maximum in QML BarSeries Not Updating
我正在使用 QML BarSeries
显示一些数据并遇到问题:BarSeries 的 y 轴不会自动更新。
下面是从 BarSeries 文档复制和修改的 mcve。它会在用户点击背景时更新栏系列。
// main.qml
import QtQuick 2.6
import QtQuick.Window 2.2
import QtCharts 2.2
Window {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
ChartView {
id: chartView
title: "Bar series"
anchors.fill: parent
legend.alignment: Qt.AlignBottom
antialiasing: true
BarSeries {
id: mySeries
axisX: BarCategoryAxis { categories: ["2007", "2008", "2009", "2010", "2011", "2012" ] }
BarSet { label: "Bob"; values: [2, 2, 3, 4, 5, 6] }
BarSet { label: "Susan"; values: [5, 1, 2, 4, 1, 7] }
BarSet { label: "James"; values: [3, 5, 8, 13, 5, 8] }
}
}
MouseArea {
anchors.fill: parent
onClicked: {
mySeries.clear(); // clear previous sets
// update with new sets
mySeries.append("Bob", [3, 5, 8, 13, 5, 8]);
mySeries.append("Susan", [2, 2, 3, 4, 5, 200]);
mySeries.append("James", [5, 1, 2, 4, 1, 7]);
}
}
}
从代码中,我们可以看到点击鼠标区域应该更新系列,使其 y 轴达到 200(由于 Susan 的新系列值)。
下面的屏幕截图显示了更新的列而不是 y 轴。 (请注意,我希望 y 轴最大值更新为 200。)
鼠标点击前:
鼠标点击后:
我应该进行哪些更改才能更新图表的 y 轴最大值?
在 MouseArea::onClicked
中的多个 mySeries.append
语句之后,我尝试执行 chartView.update()
但这无济于事。
我搜索和研究但一无所获。来自网络的大多数答案仅关注 C++ 中的 QtCharts 运行 或描述不同的问题(除非我搜索了错误的关键字?)。
为了完整起见,这里是 main.cpp
文件:
#include <QApplication>
#include <QQmlApplicationEngine>
int main(int argc, char *argv[])
{
QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
QApplication app(argc, argv); // needs QT += widgets in qmake
QQmlApplicationEngine engine;
engine.load(QUrl(QStringLiteral("qrc:/main.qml")));
if (engine.rootObjects().isEmpty())
return -1;
return app.exec();
}
我能够通过附加自定义 ValueAxis
to the BarSeries and manually, programmatically updating the new maximum with the ValueAxis::max
属性.
来解决这个问题
import QtQuick 2.6
import QtQuick.Window 2.2
import QtCharts 2.2
Window {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
ChartView {
id: chartView
title: "Bar series"
anchors.fill: parent
legend.alignment: Qt.AlignBottom
antialiasing: true
BarSeries {
id: mySeries
axisX: BarCategoryAxis { categories: ["2007", "2008", "2009", "2010", "2011", "2012" ] }
axisY: ValueAxis { // <- custom ValueAxis attached to the y-axis
id: valueAxis
}
BarSet { label: "Bob"; values: [2, 2, 3, 4, 5, 6] }
BarSet { label: "Susan"; values: [5, 1, 2, 4, 1, 7] }
BarSet { label: "James"; values: [3, 5, 8, 13, 5, 8] }
}
}
MouseArea {
anchors.fill: parent
onClicked: {
mySeries.clear();
mySeries.append("Bob", [3, 5, 8, 13, 5, 8]);
mySeries.append("Susan", [2, 2, 3, 4, 5, 200]);
mySeries.append("James", [5, 1, 2, 4, 1, 7]);
valueAxis.max = 200; // hard-code a new maximum
}
}
}
效果很好。这是点击背景后图表现在的样子:
这是一个动态计算新最大值的解决方案(为简洁起见,仅显示 onClicked
插槽):
onClicked: {
mySeries.clear();
mySeries.append("Bob", [3, 5, 8, 13, 5, 8]);
mySeries.append("Susan", [2, 2, 3, 4, 5, 200]);
mySeries.append("James", [5, 1, 2, 4, 1, 7]);
// deduce the new min and max
var min = 1e8, max = -1e8;
for (var i = 0; i < mySeries.count; i++) {
// min = Math.min(min, ...mySeries.at(i).values); // modern js not yet supported?
// max = Math.min(max, ...mySeries.at(i).values);
min = Math.min(min, mySeries.at(i).values.reduce(function(a,b) {
return Math.min(a, b);
}));
max = Math.max(max, mySeries.at(i).values.reduce(function(a,b) {
return Math.max(a, b);
}));
}
// set the new min and max
valueAxis.min = min;
valueAxis.max = max;
// valueAxis.max = max * 1.05; // or give a little margin?
}
当然,最小值可能被排除在外,但这完全取决于您的数据和情况。
我正在使用 QML BarSeries
显示一些数据并遇到问题:BarSeries 的 y 轴不会自动更新。
下面是从 BarSeries 文档复制和修改的 mcve。它会在用户点击背景时更新栏系列。
// main.qml
import QtQuick 2.6
import QtQuick.Window 2.2
import QtCharts 2.2
Window {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
ChartView {
id: chartView
title: "Bar series"
anchors.fill: parent
legend.alignment: Qt.AlignBottom
antialiasing: true
BarSeries {
id: mySeries
axisX: BarCategoryAxis { categories: ["2007", "2008", "2009", "2010", "2011", "2012" ] }
BarSet { label: "Bob"; values: [2, 2, 3, 4, 5, 6] }
BarSet { label: "Susan"; values: [5, 1, 2, 4, 1, 7] }
BarSet { label: "James"; values: [3, 5, 8, 13, 5, 8] }
}
}
MouseArea {
anchors.fill: parent
onClicked: {
mySeries.clear(); // clear previous sets
// update with new sets
mySeries.append("Bob", [3, 5, 8, 13, 5, 8]);
mySeries.append("Susan", [2, 2, 3, 4, 5, 200]);
mySeries.append("James", [5, 1, 2, 4, 1, 7]);
}
}
}
从代码中,我们可以看到点击鼠标区域应该更新系列,使其 y 轴达到 200(由于 Susan 的新系列值)。
下面的屏幕截图显示了更新的列而不是 y 轴。 (请注意,我希望 y 轴最大值更新为 200。)
鼠标点击前:
鼠标点击后:
我应该进行哪些更改才能更新图表的 y 轴最大值?
在 MouseArea::onClicked
中的多个 mySeries.append
语句之后,我尝试执行 chartView.update()
但这无济于事。
我搜索和研究但一无所获。来自网络的大多数答案仅关注 C++ 中的 QtCharts 运行 或描述不同的问题(除非我搜索了错误的关键字?)。
为了完整起见,这里是 main.cpp
文件:
#include <QApplication>
#include <QQmlApplicationEngine>
int main(int argc, char *argv[])
{
QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
QApplication app(argc, argv); // needs QT += widgets in qmake
QQmlApplicationEngine engine;
engine.load(QUrl(QStringLiteral("qrc:/main.qml")));
if (engine.rootObjects().isEmpty())
return -1;
return app.exec();
}
我能够通过附加自定义 ValueAxis
to the BarSeries and manually, programmatically updating the new maximum with the ValueAxis::max
属性.
import QtQuick 2.6
import QtQuick.Window 2.2
import QtCharts 2.2
Window {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
ChartView {
id: chartView
title: "Bar series"
anchors.fill: parent
legend.alignment: Qt.AlignBottom
antialiasing: true
BarSeries {
id: mySeries
axisX: BarCategoryAxis { categories: ["2007", "2008", "2009", "2010", "2011", "2012" ] }
axisY: ValueAxis { // <- custom ValueAxis attached to the y-axis
id: valueAxis
}
BarSet { label: "Bob"; values: [2, 2, 3, 4, 5, 6] }
BarSet { label: "Susan"; values: [5, 1, 2, 4, 1, 7] }
BarSet { label: "James"; values: [3, 5, 8, 13, 5, 8] }
}
}
MouseArea {
anchors.fill: parent
onClicked: {
mySeries.clear();
mySeries.append("Bob", [3, 5, 8, 13, 5, 8]);
mySeries.append("Susan", [2, 2, 3, 4, 5, 200]);
mySeries.append("James", [5, 1, 2, 4, 1, 7]);
valueAxis.max = 200; // hard-code a new maximum
}
}
}
效果很好。这是点击背景后图表现在的样子:
这是一个动态计算新最大值的解决方案(为简洁起见,仅显示 onClicked
插槽):
onClicked: {
mySeries.clear();
mySeries.append("Bob", [3, 5, 8, 13, 5, 8]);
mySeries.append("Susan", [2, 2, 3, 4, 5, 200]);
mySeries.append("James", [5, 1, 2, 4, 1, 7]);
// deduce the new min and max
var min = 1e8, max = -1e8;
for (var i = 0; i < mySeries.count; i++) {
// min = Math.min(min, ...mySeries.at(i).values); // modern js not yet supported?
// max = Math.min(max, ...mySeries.at(i).values);
min = Math.min(min, mySeries.at(i).values.reduce(function(a,b) {
return Math.min(a, b);
}));
max = Math.max(max, mySeries.at(i).values.reduce(function(a,b) {
return Math.max(a, b);
}));
}
// set the new min and max
valueAxis.min = min;
valueAxis.max = max;
// valueAxis.max = max * 1.05; // or give a little margin?
}
当然,最小值可能被排除在外,但这完全取决于您的数据和情况。