QML使用qchart.js方法详解

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

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

在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