QChart.js是chartjs的QML版本,你可以在这里下载到它。

它暂时包含柱状图(bar chart)、环形图(doughnut chart )、线形图(line chart)、饼图(pie chart)、雷达图或蛛网图(Radar chart)和极地区域图(Polar area chart)6种图表。

qchart

在QML项目中使用qchart.js的步骤和方法如下:

  1. github下载 qchart.js 源码。
  2. <QTDIR>\qml 目录下创建 “jbQuickCharts” 子目录,将源码中的 “QCharts.js”、“QChart.qml”、“qmldir” 等文件拷贝到创建好的 <QTDIR>\qml\bQuick\Charts 目录,操作完成后目录结构大概如下:

    jbQuick
       -Charts
          -QCharts.js
          -QChart.qml
          -qmldir
          - ...
  3. 打开项目文件(*.pro),在项目文件中添加下面内容:

    QML_IMPORT_PATH += qml
  4. 打开 main.cpp 文件,在适当的位置添加下面内容:

    engine.addImportPath(QStringLiteral("jbQuick/Charts"));
    engine.addImportPath(QStringLiteral("qml"));
  5. 在目标qml文件中导入jbQuick

    import jbQuick.Charts 1.0

Chart提供下列属性:

  • chartAnimated: whether chart data should be animated on initialization
  • chartAnimationEasing: an easing type enumeration provided to a PropertyAnimation
  • chartAnimationDuration: the length (ms) of the animation
  • chartData: a javascript construct of the data set, see Chart.js documentation
  • chartType: a value amongst:

    • Charts.chartType.BAR for a bar chart
    • Charts.chartType.DOUGHNUT for a doughnut chart
    • Charts.chartType.LINE for a line chart
    • Charts.chartType.PIE for a pie chart
    • Charts.chartType.POLAR for a polar chart
    • Charts.chartType.RADAR for a radar chart

下面是创建一个线形图的例子:

Chart {  
    id: chart_line;  
    width: 400;  
    height: 400;  
    chartAnimated: true;  
    chartAnimationEasing: Easing.InOutElastic;  
    chartAnimationDuration: 2000;  
    chartType: Charts.ChartType.LINE;  
    Component.onCompleted: {
        chartData = ...;  
    }
}

更多相关的示例可以在 QChartGallery.js 和 QChartGallery.qml 中被找到。

参考链接:
http://jwintz.me/blog/2014/02/15/qchart-dot-js-qml-binding-for-chart-dot-js/
http://stackoverflow.com/questions/33044176/chart-in-qmlqchart-js

标签: Qt, QML, qchart.js, qchart

添加新评论