☰

如何在 QML 中创建图表？

tag-icon • tag-icon application-development ubuntu-touch ubuntu-sdk qml
如何在 QML 中创建图表？

我想在我的应用程序中添加一个页面，该页面不仅包含原始数据，还包含用于显示数据的美观图表。

是否存在可以用来在 QML 中创建此类元素的本机组件或第三方插件？

我正在寻找一个开源解决方案，理想情况下它不仅可以在 ubuntu-touch 上运行，而且还可以在桌面系统上运行。

答案1

您可以使用QChart.js- QML 绑定Charts.js（使用 Canvas 元素的简单 HTML5 图表 JavaScript 库）

在此处输入图片描述

我分叉了该项目这里支持调整大小事件（用于桌面）。我基本上需要重置画布上下文，以允许调整大小事件使用更新的窗口大小正确地重新绘制表面（参见http://qt-project.org/forums/viewthread/37313）

QML 示例：

在此处输入图片描述

以下代码片段创建了上述饼图页面：

import QtQuick 2.0
import QtQuick.Layouts 1.1
import Ubuntu.Components 0.1
import "."
import "QChart.js" as Charts

MainView {
    id: root
    width: units.gu(50)
    height: units.gu(80)

    PageStack {
        id: pageStack
        Component.onCompleted: push(page0)

        Page {
            id: page0
            title: i18n.tr("Test Results")

            ColumnLayout {
                spacing: units.gu(2)
                anchors.margins: units.gu(2);
                anchors.fill: parent

                Label {
                    fontSize: "x-large"
                    text: "Summary"
                }

                Chart {
                    id: chart_pie;
                    Layout.fillHeight: true
                    Layout.fillWidth: true
                    chartAnimated: true;
                    chartAnimationEasing: Easing.Linear;
                    chartAnimationDuration: 1000;
                    chartType: Charts.ChartType.PIE;
                    chartOptions: {"segmentStrokeColor": "#ECECEC"};
                    chartData: [
                        {value: 15, color: "#6AA84F"},
                        {value:  3, color: "#DC3912"},
                        {value:  5, color: "#FF9900"}];
                }

                Column {
                    id: legend
                    Row {
                        spacing: units.gu(1)
                        Text {
                            text: "█"
                            color:"#6AA84F"
                        }
                        Text {
                            text: "15 tests passed"
                        }
                    }
                    Row {
                        spacing: units.gu(1)
                        Text {
                            text: "█"
                            color:"#DC3912"
                        }
                        Text {
                            text: "3 tests failed"
                        }
                    }
                    Row {
                        spacing: units.gu(1)
                        Text {
                            text: "█"
                            color:"#FF9900"
                        }
                        Text {
                            text: "5 tests skipped"
                        }
                    }
                }

                Button {
                    id: button
                    Layout.fillWidth: true
                    color: "#009E0F";
                    text: "Save detailed report";
                    font.bold: true;
                    onClicked: {
                        button.color = "#009E0F"
                        chart_pie.repaint();
                    }
                }
            }
        }
    }
}

答案2

另一个解决方案是使用我们的绑定，它与 Sylvain 建议的非常相似。它适用于 Chart.js 2……虽然不完美，但可能对您也有帮助：https://github.com/Elypson/ChartJs2QML

相关内容