首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >如何在QML中创建图表?

如何在QML中创建图表?
EN

Ask Ubuntu用户
提问于 2014-10-02 16:54:21
回答 2查看 7.5K关注 0票数 6

我想在我的应用程序中添加一个页面,它不仅有原始的数字,而且还具有显示数据的友好图表。

我是否可以使用本地组件或第三方插件在QML中创建这样的元素?

我正在寻找一种开源解决方案,理想情况下,它不仅适用于ubuntu触摸,而且也适用于桌面系统。

EN

回答 2

Ask Ubuntu用户

回答已采纳

发布于 2014-10-02 16:54:21

您可以将QChart.js - QML绑定用于Charts.js (使用画布元素的简单HTML5图表javascript库)。

我对项目这里进行了分叉,以支持调整事件大小(供桌面使用)。我基本上需要重置画布上下文,以允许调整大小的事件正确地用更新的窗口大小重新绘制曲面(请参阅http://qt-project.org/forums/viewthread/37313)。

QML示例:

下面的片段创建了上面的饼图页面:

代码语言:javascript
代码运行次数:0
运行
复制
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();
                    }
                }
            }
        }
    }
}
票数 13
EN

Ask Ubuntu用户

发布于 2020-02-25 15:28:26

另一个解决方案是使用我们的绑定,这非常类似西尔万的建议。适用于Chart.js 2..。这并不完美,但也可能对你有帮助:https://github.com/Elypson/ChartJs2QML

票数 2
EN
页面原文内容由Ask Ubuntu提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://askubuntu.com/questions/531472

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档