QML使用qchart.js方法详解
QChart.js是chartjs的QML版本,你可以在这里下载到它。
它暂时包含柱状图(bar chart)、环形图(doughnut chart )、线形图(line chart)、饼图(pie chart)、雷达图或蛛网图(Radar chart)和极地区域图(Polar area chart)6种图表。
在QML项目中使用qchart.js的步骤和方法如下:
- 在github下载 qchart.js 源码。
在
<QTDIR>\qml
目录下创建 “jbQuickCharts” 子目录,将源码中的 “QCharts.js”、“QChart.qml”、“qmldir” 等文件拷贝到创建好的<QTDIR>\qml\bQuick\Charts
目录,操作完成后目录结构大概如下:jbQuick -Charts -QCharts.js -QChart.qml -qmldir - ...
打开项目文件(*.pro),在项目文件中添加下面内容:
QML_IMPORT_PATH += qml
打开 main.cpp 文件,在适当的位置添加下面内容:
engine.addImportPath(QStringLiteral("jbQuick/Charts")); engine.addImportPath(QStringLiteral("qml"));
在目标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