31——StocQt
最后更新于：2022-04-01 07:22:15
本系列所有文章可以在这里查看[http://blog.csdn.net/cloud_castle/article/category/2123873](http://blog.csdn.net/cloud_castle/article/category/2123873)
接上文[Qt5官方demo解析集30——Extending QML - Binding Example](http://blog.csdn.net/cloud_castle/article/details/37534507)
最近在做QML制表，因此想找一些相关曲线绘制的demo看看，结果发现了这个例子，觉得挺不错，它相比于我们之前的Extend和Particle系列显得更大一些，涉及到的面也更广一些。因此想拿过来给大家分享~
这个例子是基于QML的股票走势图绘制，数据来源于yahoo的纳达克斯-100指数，向左滑动可以选择股票。
曲线页面：
列表页面：
工程目录如下：
这个例子的结构会稍微复杂一些，我建议大家在QtCreator中将这个例子打开，这样有什么想法或是疑虑时我们可以将代码改改，或是添加一些输出信息，举一反三的学习总是比较有效的。
ok，我们自顶而下的跟着调用的顺序来：
stocqt.qml:
~~~
import QtQuick 2.0
import QtQml.Models 2.1
import "./content" // 添加其他qml文件路径
Rectangle {
id: mainRect
width: 1000
height: 700
property int listViewActive: 0 // 该页面实际是一个ListView的一部分，这个属性用来表明前面的列表页面是否被激活
Rectangle { // 导航栏
id: banner
height: 80
anchors.top: parent.top
width: parent.width
color: "#000000"
Image {
id: arrow
source: "./content/images/icon-left-arrow.png"
anchors.left: banner.left
anchors.leftMargin: 20
anchors.verticalCenter: banner.verticalCenter
visible: root.currentIndex == 1 ? true : false // 曲线页面是ListView的第二个页面，currentIndex的值也就是1
MouseArea {
anchors.fill: parent
onClicked: listViewActive = 1;
}
}
Item { // 将相关组件放在一个Item容器中
id: textItem
width: stocText.width + qtText.width // 容器的尺寸由组件决定
height: stocText.height + qtText.height
anchors.horizontalCenter: banner.horizontalCenter
anchors.verticalCenter: banner.verticalCenter
Text { // Stoc
id: stocText
anchors.verticalCenter: textItem.verticalCenter
color: "#ffffff"
font.family: "Abel"
font.pointSize: 40
text: "Stoc"
}
Text { // Qt
id: qtText
anchors.verticalCenter: textItem.verticalCenter
anchors.left: stocText.right
color: "#5caa15"
font.family: "Abel"
font.pointSize: 40
text: "Qt"
}
}
}
ListView { // 标题栏下方则是ListView的内容，它为列表页面与曲线页面提供了滑动切换的能力
id: root
width: parent.width
anchors.top: banner.bottom
anchors.bottom: parent.bottom
snapMode: ListView.SnapOneItem // 设置该属性使View停止在一个完整的页面上
highlightRangeMode: ListView.StrictlyEnforceRange
highlightMoveDuration: 250 // 这里设置了一个无形的高亮，它不显示，但提供了0.25秒的切换动画
focus: false
orientation: ListView.Horizontal
boundsBehavior: Flickable.StopAtBounds // 滑动时停在边界，默认可以拉拽更远并在弹回时带有超调效果
currentIndex: listViewActive == 0 ? 1 : 0 // 使用属性绑定，当listViewActive被激活时，使currentIndex置0，从而跳转到列表页面
onCurrentIndexChanged: {
if (currentIndex == 1)
listViewActive = 0;
}
StockModel { // 初始化数据模型
id: stock
stockId: listView.currentStockId // 注意这个listView不是其父ListView，而是下面那个，即列表页面
stockName: listView.currentStockName // 列表页面将当前所选的股票ID及名字赋给StockModel，使其取得相应的数据
onStockIdChanged: stock.updateStock(); // 当ID改变时数据更新
onDataReady: {
console.log(listView.currentStockId, listView.currentStockName)
root.positionViewAtIndex(1, ListView.SnapPosition) // 上面的高亮即为这里的ListView.SnapPosition做准备，数据变更后切换到曲线页面，带有0.25秒的过渡动画
stockView.update() // 页面更新
}
}
model: ObjectModel { // ObjectModel源自上面import的Qt.QML.Model 2.1，它使得ListView可以使用一组对象作为模型
StockListView { // 列表页面
id: listView
width: root.width
height: root.height
}
StockView { // 曲线页面
id: stockView
width: root.width
height: root.height
stocklist: listView
stock: stock
}
}
}
}
~~~
有人说数据是一个程序骨架，那就看看这个架子吧~
StockModel.qml:
~~~
import QtQuick 2.0
ListModel { // ListModel作为根项目，自定义属性作为接口，并定义了多个函数。但他本身在初始化时并不进行运算
id: model
property string stockId: "" // 股票ID
property string stockName: "" // 股票名
property string stockDataCycle: "d" // 数据周期
property bool ready: false // 标志位
property real stockPrice: 0.0 // 股票价格
property real stockPriceChanged: 0.0 // 价格变化
signal dataReady // 耗时的数据类通常需要定义这个信号
function indexOf(date) { // 返回从特定date的数据在数据集中的位置
var newest = new Date(model.get(0).date); // 获取第一个数据对象的日期
var oldest = new Date(model.get(model.count - 1).date); // 最后一个数据对象的日期
if (newest <= date)
return -1; // 在最新日期之后直接返回
if (oldest >= date)
return model.count - 1; // 在最先日期之前全部返回
var currDiff = 0;
var bestDiff = Math.abs(date.getTime() - newest.getTime());
var retval = 0; // 返回变量
for (var i = 0; i < model.count; i++) {
var d = new Date(model.get(i).date);
currDiff = Math.abs(d.getTime() - date.getTime()); // 计算时间差值
if (currDiff < bestDiff) { // 从最新时间向目标时间推进
bestDiff = currDiff;
retval = i; // retval记录数据位置
}
if (currDiff > bestDiff) // 当达到目标时间后
return retval; // 将数据位置返回
}
return -1;
}
function requestUrl() { // 创建请求数据的url字符串函数
if (stockId === "")
return;
var startDate = new Date(2011, 4, 25); // 指定一个开始时间
var endDate = new Date(); // 结束时间为当前时间
if (stockDataCycle !== "d" && stockDataCycle !== "w" && stockDataCycle !== "m")
stockDataCycle = "d"; // 如果数据周期不是'天'、'周'、'月'，则定义为'天'
/* // 注释给出了向yahoo请求数据的格式
Fetch stock data from yahoo finance:
url: http://ichart.finance.yahoo.com/table.csv?s=NOK&a=5&b=11&c=2010&d=7&e=23&f=2010&g=d&ignore=.csv
s:stock name/id, a:start day, b:start month, c:start year default: 25 April 1995, oldest c= 1962
d:end day, e:end month, f:end year, default:today (data only available 3 days before today)
g:data cycle(d daily, w weekly, m monthly, v Dividend)
*/
var request = "http://ichart.finance.yahoo.com/table.csv?";
request += "s=" + stockId;
request += "&a=" + startDate.getMonth();
request += "&b=" + startDate.getDate();
request += "&c=" + startDate.getFullYear();
request += "&d=" + endDate.getMonth();
request += "&e=" + endDate.getDate();
request += "&f=" + endDate.getFullYear();
request += "&g=" + stockDataCycle;
request += "&ignore=.csv";
return request; // 返回这一长串url
}
function createStockPrice(r) { // 存储数据对象函数
return { // 用来接收下面分离的7位数据，以类似结构体的形式存储下来
"date": r[0], // 这也是该model真正存储的数据类型格式
"open":r[1],
"high":r[2],
"low":r[3],
"close":r[4],
"volume":r[5],
"adjusted":r[6]
};
}
function updateStock() { // 数据更新
var req = requestUrl(); // 得到请求数据的url字符串
if (!req)
return;
var xhr = new XMLHttpRequest; // 创建一个XMLHttp的请求对象
xhr.open("GET", req, true); // 初始化请求参数，还未发送请求
model.ready = false; // 标志位置false
model.clear(); // 数据清空
var i = 1; // 输出一下调试信息可知，返回的数据第一行为描述符，因此将其跳过
xhr.onreadystatechange = function() { // readyState是XMLHttpRequest的一个属性，其值从0变化到4
if (xhr.readyState === XMLHttpRequest.LOADING || xhr.readyState === XMLHttpRequest.DONE) {
var records = xhr.responseText.split('\n'); // LOADING为3，DONE为4，分别表示数据正在载入和载入完成
// 以换行符分割数据
for (;i < records.length; i++ ) {
var r = records[i].split(','); // 以逗号将数据分割
if (r.length === 7) // 数据校验
model.append(createStockPrice(r)); // 函数调用，向model中添加数据
}
if (xhr.readyState === XMLHttpRequest.DONE) {
if (model.count > 0) {
model.ready = true;
model.stockPrice = model.get(0).adjusted; // 将最新的的调整收盘价赋予stockPrice
model.stockPriceChanged = model.count > 1 ? (Math.round((model.stockPrice - model.get(1).close) * 100) / 100) : 0; // 相比前一天的收盘价变化率
model.dataReady(); //emit signal
}
}
}
}
xhr.send() // 实际发出数据请求
}
}
~~~
我们将records的数据部分贴出来：
实际的数据被'\n'分开，也就是说，类似下面这个样子：
Data,Open,High,Low,Close,Volume,Adj Close,
2014-7-28,97.82,99.24,97.55,99.02,55239000,99.02,
2014-7-25 ......(7-26,7-27?周末休市啦......)
为了得到各股的变化率等，StockListView也采取了类似的实现方式：
StockListView.qml:
~~~
import QtQuick 2.0
Rectangle {
id: root
width: 320
height: 410
anchors.top: parent.top
anchors.bottom: parent.bottom
color: "white"
property string currentStockId: ""
property string currentStockName: ""
ListView {
id: view
anchors.fill: parent
width: parent.width
clip: true // clip以延时加载数据
keyNavigationWraps: true
highlightMoveDuration: 0
focus: true
snapMode: ListView.SnapToItem
model: StockListModel{} // 定义model
function requestUrl(stockId) { // 最近5天的url创建函数，与StockModel不同的是，由于未定义stockId属性，它带有这样一个参数
var endDate = new Date(""); // today
var startDate = new Date()
startDate.setDate(startDate.getDate() - 5);
var request = "http://ichart.finance.yahoo.com/table.csv?";
request += "s=" + stockId;
request += "&g=d";
request += "&a=" + startDate.getMonth();
request += "&b=" + startDate.getDate();
request += "&c=" + startDate.getFullYear();
request += "&d=" + endDate.getMonth();
request += "&e=" + endDate.getDate();
request += "&f=" + endDate.getFullYear();
request += "&g=d";
request += "&ignore=.csv";
return request;
}
function getCloseValue(index) {
var req = requestUrl(model.get(index).stockId); // 得到对应的股票Id
if (!req)
return;
var xhr = new XMLHttpRequest;
xhr.open("GET", req, true);
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.LOADING || xhr.readyState === XMLHttpRequest.DONE) {
var records = xhr.responseText.split('\n');
if (records.length > 0) {
var r = records[1].split(','); // 第一条数据，即最新一天的数据
model.setProperty(index, "value", r[4]); // 与StockModel类似，第五个数据为'Close'，即收盘价
// 这里将model中index位置数据的"value"值设置为该收盘价 // 注意这个model是StockListModel而不是StockModel
var today = parseFloat(r[4]); // parseFloat()将字符串转化成浮点数，变量声明为var而不是real
r = records[2].split(','); // 再取前一天数据
var yesterday = parseFloat(r[4]);
var change = today - yesterday; // 计算变化值
if (change >= 0.0)
model.setProperty(index, "change", "+" + change.toFixed(2)); // 同样对model赋值大于零则带+号，保留两位小数
else
model.setProperty(index, "change", change.toFixed(2));
var changePercentage = (change / yesterday) * 100.0; // 变化率百分比
if (changePercentage >= 0.0)
model.setProperty(index, "changePercentage", "+" + changePercentage.toFixed(2) + "%");
else
model.setProperty(index, "changePercentage", changePercentage.toFixed(2) + "%");
}
}
}
xhr.send() // 发送请求
}
onCurrentIndexChanged: { // 当该ListView中的某个项目被选中
mainRect.listViewActive = 0; // 切换主ListView的页面
root.currentStockId = model.get(currentIndex).stockId; // 获取 Id 与 name
root.currentStockName = model.get(currentIndex).name;
}
delegate: Rectangle { // 委托组件，基本都是布局，不多说了
height: 102
width: parent.width
color: "transparent"
MouseArea {
anchors.fill: parent;
onClicked: {
view.currentIndex = index;
}
}
Text {
id: stockIdText
anchors.top: parent.top
anchors.topMargin: 15
anchors.left: parent.left
anchors.leftMargin: 15
width: 125
height: 40
color: "#000000"
font.family: "Open Sans" // 我的机器貌似不支持这种字体
font.pointSize: 20
font.weight: Font.Bold
verticalAlignment: Text.AlignVCenter
text: stockId
}
Text {
id: stockValueText
anchors.top: parent.top
anchors.topMargin: 15
anchors.right: parent.right
anchors.rightMargin: 0.31 * parent.width
width: 190
height: 40
color: "#000000"
font.family: "Open Sans"
font.pointSize: 20
font.bold: true
horizontalAlignment: Text.AlignRight
verticalAlignment: Text.AlignVCenter
text: value
Component.onCompleted: view.getCloseValue(index);
}
Text {
id: stockValueChangeText
anchors.top: parent.top
anchors.topMargin: 15
anchors.right: parent.right
anchors.rightMargin: 20
width: 135
height: 40
color: "#328930"
font.family: "Open Sans"
font.pointSize: 20
font.bold: true
horizontalAlignment: Text.AlignRight
verticalAlignment: Text.AlignVCenter
text: change
onTextChanged: {
if (parseFloat(text) >= 0.0) // 正为绿色，负为红色
color = "#328930";
else
color = "#d40000";
}
}
Text {
id: stockNameText
anchors.top: stockIdText.bottom
anchors.left: parent.left
anchors.leftMargin: 15
width: 330
height: 30
color: "#000000"
font.family: "Open Sans"
font.pointSize: 16
font.bold: false
elide: Text.ElideRight
maximumLineCount: 1
verticalAlignment: Text.AlignVCenter
text: name
}
Text {
id: stockValueChangePercentageText
anchors.top: stockIdText.bottom
anchors.right: parent.right
anchors.rightMargin: 20
width: 120
height: 30
color: "#328930"
font.family: "Open Sans"
font.pointSize: 18
font.bold: false
horizontalAlignment: Text.AlignRight
verticalAlignment: Text.AlignVCenter
text: changePercentage
onTextChanged: {
if (parseFloat(text) >= 0.0)
color = "#328930";
else
color = "#d40000";
}
}
Rectangle {
id: endingLine
anchors.bottom: parent.bottom
anchors.left: parent.left
height: 1
width: parent.width
color: "#d7d7d7"
}
}
highlight: Rectangle {
width: parent.width
color: "#eeeeee"
}
}
}
~~~
为了支撑这个StockListView，我们还需要一个StockListModel.qml:
它同样是一个ListModel，由许多个ListElement构成，代码也很明了。除了name和stockId 被赋值外，value，change，changePercentage都是在view中被动态赋值的，因此均初始化为0.0。
~~~
import QtQuick 2.0
ListModel {
id: stocks
// Data from : http://en.wikipedia.org/wiki/NASDAQ-100 // 这里告诉了我们数据来源
ListElement {name: "Apple Inc."; stockId: "AAPL"; value: "0.0"; change: "0.0"; changePercentage: "0.0"}
ListElement {name: "Adobe Systems Inc."; stockId: "ADBE"; value: "0.0"; change: "0.0"; changePercentage: "0.0"}
ListElement {name: "Analog Devices, Inc."; stockId: "ADI"; value: "0.0"; change: "0.0"; changePercentage: "0.0"}
ListElement {name: "Automatic Data Processing, Inc."; stockId: "ADP"; value: "0.0"; change: "0.0"; changePercentage: "0.0"}
ListElement {name: "Autodesk, Inc."; stockId: "ADSK"; value: "0.0"; change: "0.0"; changePercentage: "0.0"}
ListElement {name: "Akamai Technologies, Inc."; stockId: "AKAM"; value: "0.0"; change: "0.0"; changePercentage: "0.0"}
ListElement {name: "Altera Corp."; stockId: "ALTR"; value: "0.0"; change: "0.0"; changePercentage: "0.0"}
ListElement {name: "Alexion Pharmaceuticals, Inc."; stockId: "ALXN"; value: "0.0"; change: "0.0"; changePercentage: "0.0"}
ListElement {name: "Applied Materials, Inc."; stockId: "AMAT"; value: "0.0"; change: "0.0"; changePercentage: "0.0"}
ListElement {name: "Amgen Inc."; stockId: "AMGN"; value: "0.0"; change: "0.0"; changePercentage: "0.0"}
ListElement {name: "Amazon.com Inc."; stockId: "AMZN"; value: "0.0"; change: "0.0"; changePercentage: "0.0"}
ListElement {name: "Activision Blizzard, Inc."; stockId: "ATVI"; value: "0.0"; change: "0.0"; changePercentage: "0.0"}
ListElement {name: "Avago Technologies Limited"; stockId: "AVGO"; value: "0.0"; change: "0.0"; changePercentage: "0.0"}
ListElement {name: "Bed Bath & Beyond Inc."; stockId: "BBBY"; value: "0.0"; change: "0.0"; changePercentage: "0.0"}
ListElement {name: "Baidu, Inc."; stockId: "BIDU"; value: "0.0"; change: "0.0"; changePercentage: "0.0"}
ListElement {name: "Biogen Idec Inc."; stockId: "BIIB"; value: "0.0"; change: "0.0"; changePercentage: "0.0"}
ListElement {name: "Broadcom Corp."; stockId: "BRCM"; value: "0.0"; change: "0.0"; changePercentage: "0.0"}
ListElement {name: "CA Technologies"; stockId: "CA"; value: "0.0"; change: "0.0"; changePercentage: "0.0"}
ListElement {name: "Celgene Corporation"; stockId: "CELG"; value: "0.0"; change: "0.0"; changePercentage: "0.0"}
ListElement {name: "Cerner Corporation"; stockId: "CERN"; value: "0.0"; change: "0.0"; changePercentage: "0.0"}
ListElement {name: "Check Point Software Technologies Ltd."; stockId: "CHKP"; value: "0.0"; change: "0.0"; changePercentage: "0.0"}
ListElement {name: "CH Robinson Worldwide Inc."; stockId: "CHRW"; value: "0.0"; change: "0.0"; changePercentage: "0.0"}
ListElement {name: "Charter Communications, Inc."; stockId: "CHTR"; value: "0.0"; change: "0.0"; changePercentage: "0.0"}
ListElement {name: "Comcast Corporation"; stockId: "CMCSA"; value: "0.0"; change: "0.0"; changePercentage: "0.0"}
ListElement {name: "Costco Wholesale Corporation"; stockId: "COST"; value: "0.0"; change: "0.0"; changePercentage: "0.0"}
ListElement {name: "Cisco Systems, Inc."; stockId: "CSCO"; value: "0.0"; change: "0.0"; changePercentage: "0.0"}
ListElement {name: "Catamaran Corporation"; stockId: "CTRX"; value: "0.0"; change: "0.0"; changePercentage: "0.0"}
ListElement {name: "Cognizant Technology Solutions Corporation"; stockId: "CTSH"; value: "0.0"; change: "0.0"; changePercentage: "0.0"}
ListElement {name: "Citrix Systems, Inc."; stockId: "CTXS"; value: "0.0"; change: "0.0"; changePercentage: "0.0"}
ListElement {name: "Discovery Communications, Inc."; stockId: "DISCA"; value: "0.0"; change: "0.0"; changePercentage: "0.0"}
ListElement {name: "Dish Network Corp."; stockId: "DISH"; value: "0.0"; change: "0.0"; changePercentage: "0.0"}
ListElement {name: "Dollar Tree, Inc."; stockId: "DLTR"; value: "0.0"; change: "0.0"; changePercentage: "0.0"}
ListElement {name: "DIRECTV"; stockId: "DTV"; value: "0.0"; change: "0.0"; changePercentage: "0.0"}
ListElement {name: "eBay Inc."; stockId: "EBAY"; value: "0.0"; change: "0.0"; changePercentage: "0.0"}
ListElement {name: "Equinix, Inc."; stockId: "EQIX"; value: "0.0"; change: "0.0"; changePercentage: "0.0"}
ListElement {name: "Express Scripts Holding Company"; stockId: "ESRX"; value: "0.0"; change: "0.0"; changePercentage: "0.0"}
ListElement {name: "Expeditors International of Washington Inc."; stockId: "EXPD"; value: "0.0"; change: "0.0"; changePercentage: "0.0"}
ListElement {name: "Expedia Inc."; stockId: "EXPE"; value: "0.0"; change: "0.0"; changePercentage: "0.0"}
ListElement {name: "Fastenal Company"; stockId: "FAST"; value: "0.0"; change: "0.0"; changePercentage: "0.0"}
ListElement {name: "Facebook, Inc."; stockId: "FB"; value: "0.0"; change: "0.0"; changePercentage: "0.0"}
ListElement {name: "F5 Networks, Inc."; stockId: "FFIV"; value: "0.0"; change: "0.0"; changePercentage: "0.0"}
ListElement {name: "Fiserv, Inc."; stockId: "FISV"; value: "0.0"; change: "0.0"; changePercentage: "0.0"}
ListElement {name: "Twenty-First Century Fox, Inc."; stockId: "FOXA"; value: "0.0"; change: "0.0"; changePercentage: "0.0"}
ListElement {name: "Gilead Sciences Inc."; stockId: "GILD"; value: "0.0"; change: "0.0"; changePercentage: "0.0"}
ListElement {name: "Keurig Green Mountain, Inc."; stockId: "GMCR"; value: "0.0"; change: "0.0"; changePercentage: "0.0"}
ListElement {name: "Google Inc."; stockId: "GOOG"; value: "0.0"; change: "0.0"; changePercentage: "0.0"}
ListElement {name: "Google Inc."; stockId: "GOOGL"; value: "0.0"; change: "0.0"; changePercentage: "0.0"}
ListElement {name: "Garmin Ltd."; stockId: "GRMN"; value: "0.0"; change: "0.0"; changePercentage: "0.0"}
ListElement {name: "Henry Schein, Inc."; stockId: "HSIC"; value: "0.0"; change: "0.0"; changePercentage: "0.0"}
ListElement {name: "Illumina Inc."; stockId: "ILMN"; value: "0.0"; change: "0.0"; changePercentage: "0.0"}
ListElement {name: "Intel Corporation"; stockId: "INTC"; value: "0.0"; change: "0.0"; changePercentage: "0.0"}
ListElement {name: "Intuit Inc."; stockId: "INTU"; value: "0.0"; change: "0.0"; changePercentage: "0.0"}
ListElement {name: "Intuitive Surgical, Inc."; stockId: "ISRG"; value: "0.0"; change: "0.0"; changePercentage: "0.0"}
ListElement {name: "KLA-Tencor Corporation"; stockId: "KLAC"; value: "0.0"; change: "0.0"; changePercentage: "0.0"}
ListElement {name: "Kraft Foods Group, Inc."; stockId: "KRFT"; value: "0.0"; change: "0.0"; changePercentage: "0.0"}
ListElement {name: "Liberty Global plc"; stockId: "LBTYA"; value: "0.0"; change: "0.0"; changePercentage: "0.0"}
ListElement {name: "Liberty Interactive Corporation"; stockId: "LINTA"; value: "0.0"; change: "0.0"; changePercentage: "0.0"}
ListElement {name: "Linear Technology Corporation"; stockId: "LLTC"; value: "0.0"; change: "0.0"; changePercentage: "0.0"}
ListElement {name: "Liberty Media Corporation"; stockId: "LMCA"; value: "0.0"; change: "0.0"; changePercentage: "0.0"}
ListElement {name: "Marriott International, Inc."; stockId: "MAR"; value: "0.0"; change: "0.0"; changePercentage: "0.0"}
ListElement {name: "Mattel, Inc"; stockId: "MAT"; value: "0.0"; change: "0.0"; changePercentage: "0.0"}
ListElement {name: "Mondelez International, Inc."; stockId: "MDLZ"; value: "0.0"; change: "0.0"; changePercentage: "0.0"}
ListElement {name: "Monster Beverage Corporation"; stockId: "MNST"; value: "0.0"; change: "0.0"; changePercentage: "0.0"}
ListElement {name: "Microsoft Corporation"; stockId: "MSFT"; value: "0.0"; change: "0.0"; changePercentage: "0.0"}
ListElement {name: "Micron Technology Inc."; stockId: "MU"; value: "0.0"; change: "0.0"; changePercentage: "0.0"}
ListElement {name: "Maxim Integrated Products, Inc."; stockId: "MXIM"; value: "0.0"; change: "0.0"; changePercentage: "0.0"}
ListElement {name: "Mylan, Inc."; stockId: "MYL"; value: "0.0"; change: "0.0"; changePercentage: "0.0"}
ListElement {name: "Netflix, Inc."; stockId: "NFLX"; value: "0.0"; change: "0.0"; changePercentage: "0.0"}
ListElement {name: "NetApp, Inc."; stockId: "NTAP"; value: "0.0"; change: "0.0"; changePercentage: "0.0"}
ListElement {name: "NVIDIA Corporation"; stockId: "NVDA"; value: "0.0"; change: "0.0"; changePercentage: "0.0"}
ListElement {name: "NXP Semiconductors NV"; stockId: "NXPI"; value: "0.0"; change: "0.0"; changePercentage: "0.0"}
ListElement {name: "O'Reilly Automotive Inc."; stockId: "ORLY"; value: "0.0"; change: "0.0"; changePercentage: "0.0"}
ListElement {name: "Paychex, Inc."; stockId: "PAYX"; value: "0.0"; change: "0.0"; changePercentage: "0.0"}
ListElement {name: "PACCAR Inc."; stockId: "PCAR"; value: "0.0"; change: "0.0"; changePercentage: "0.0"}
ListElement {name: "The Priceline Group Inc."; stockId: "PCLN"; value: "0.0"; change: "0.0"; changePercentage: "0.0"}
ListElement {name: "QUALCOMM Incorporated"; stockId: "QCOM"; value: "0.0"; change: "0.0"; changePercentage: "0.0"}
ListElement {name: "Regeneron Pharmaceuticals, Inc."; stockId: "REGN"; value: "0.0"; change: "0.0"; changePercentage: "0.0"}
ListElement {name: "Ross Stores Inc."; stockId: "ROST"; value: "0.0"; change: "0.0"; changePercentage: "0.0"}
ListElement {name: "SBA Communications Corp."; stockId: "SBAC"; value: "0.0"; change: "0.0"; changePercentage: "0.0"}
ListElement {name: "Starbucks Corporation"; stockId: "SBUX"; value: "0.0"; change: "0.0"; changePercentage: "0.0"}
ListElement {name: "Sigma-Aldrich Corporation"; stockId: "SIAL"; value: "0.0"; change: "0.0"; changePercentage: "0.0"}
ListElement {name: "Sirius XM Holdings Inc."; stockId: "SIRI"; value: "0.0"; change: "0.0"; changePercentage: "0.0"}
ListElement {name: "SanDisk Corp."; stockId: "SNDK"; value: "0.0"; change: "0.0"; changePercentage: "0.0"}
ListElement {name: "Staples, Inc."; stockId: "SPLS"; value: "0.0"; change: "0.0"; changePercentage: "0.0"}
ListElement {name: "Stericycle, Inc."; stockId: "SRCL"; value: "0.0"; change: "0.0"; changePercentage: "0.0"}
ListElement {name: "Seagate Technology Public Limited Company"; stockId: "STX"; value: "0.0"; change: "0.0"; changePercentage: "0.0"}
ListElement {name: "Symantec Corporation"; stockId: "SYMC"; value: "0.0"; change: "0.0"; changePercentage: "0.0"}
ListElement {name: "TripAdvisor Inc."; stockId: "TRIP"; value: "0.0"; change: "0.0"; changePercentage: "0.0"}
ListElement {name: "Tractor Supply Company"; stockId: "TSCO"; value: "0.0"; change: "0.0"; changePercentage: "0.0"}
ListElement {name: "Tesla Motors, Inc."; stockId: "TSLA"; value: "0.0"; change: "0.0"; changePercentage: "0.0"}
ListElement {name: "Texas Instruments Inc."; stockId: "TXN"; value: "0.0"; change: "0.0"; changePercentage: "0.0"}
ListElement {name: "Viacom, Inc."; stockId: "VIAB"; value: "0.0"; change: "0.0"; changePercentage: "0.0"}
ListElement {name: "VimpelCom Ltd."; stockId: "VIP"; value: "0.0"; change: "0.0"; changePercentage: "0.0"}
ListElement {name: "Vodafone Group Public Limited Company"; stockId: "VOD"; value: "0.0"; change: "0.0"; changePercentage: "0.0"}
ListElement {name: "Verisk Analytics, Inc."; stockId: "VRSK"; value: "0.0"; change: "0.0"; changePercentage: "0.0"}
ListElement {name: "Vertex Pharmaceuticals Incorporated"; stockId: "VRTX"; value: "0.0"; change: "0.0"; changePercentage: "0.0"}
ListElement {name: "Western Digital Corporation"; stockId: "WDC"; value: "0.0"; change: "0.0"; changePercentage: "0.0"}
ListElement {name: "Whole Foods Market, Inc."; stockId: "WFM"; value: "0.0"; change: "0.0"; changePercentage: "0.0"}
ListElement {name: "Wynn Resorts Ltd."; stockId: "WYNN"; value: "0.0"; change: "0.0"; changePercentage: "0.0"}
ListElement {name: "Xilinx Inc."; stockId: "XLNX"; value: "0.0"; change: "0.0"; changePercentage: "0.0"}
}
~~~
骨架已成，我们接下来就要为它添加血肉了。我在网上看到有人认为底层先于界面开发更快，也有人认为先搭界面框架再做底层更好。嗯...我倒觉得谈不上好坏之分，关键在于动手之前得有一个清晰的架构。不过底层在设计之初能够拥有丰富的API 减少日后改动，界面最初设计不要要求太高（因为总是会改的。。。），这样应该会让人比较舒服一些~
好了，扯远了，下面的StockView即是我们一开始看到的曲线界面，看看它包含哪些东西：
~~~
import QtQuick 2.0
import QtQuick.Window 2.1 // 下面的代码使用了Screen因此引入这个模块
Rectangle {
id: root
width: 320
height: 480
color: "transparent"
property var stock: null
property var stocklist: null
signal settingsClicked
function update() { // 用来更新图表显示
chart.update()
}
Rectangle {
id: mainRect
color: "transparent"
anchors.fill: parent
StockInfo { // 提供左上方的股票信息
id: stockInfo
anchors.left: parent.left
anchors.leftMargin: 10
anchors.top: parent.top
anchors.topMargin: 15
height: 160
anchors.right: Screen.primaryOrientation === Qt.PortraitOrientation ? parent.right : chart.left // 基于属性绑定的屏幕转向后布局方式的变化
anchors.rightMargin: 20
stock: root.stock
}
StockChart { // 右方的曲线绘制部分
id: chart
anchors.bottom: Screen.primaryOrientation === Qt.PortraitOrientation ? settingsPanel.top : parent.bottom
anchors.bottomMargin: 20
anchors.top : Screen.primaryOrientation === Qt.PortraitOrientation ? stockInfo.bottom : parent.top
anchors.topMargin: 20
anchors.right: parent.right
anchors.rightMargin: 20
width: Screen.primaryOrientation === Qt.PortraitOrientation ? parent.width - 40 : 0.6 * parent.width
stockModel: root.stock
settings: settingsPanel
}
StockSettingsPanel { // 左下方的显示设置面板
id: settingsPanel
anchors.left: parent.left
anchors.leftMargin: 20
anchors.right: Screen.primaryOrientation === Qt.PortraitOrientation ? parent.right : chart.left
anchors.rightMargin: 20
anchors.bottom: parent.bottom
onDrawOpenPriceChanged: root.update() // 更新
onDrawClosePriceChanged: root.update();
onDrawHighPriceChanged: root.update();
onDrawLowPriceChanged: root.update();
}
}
}
~~~
可以看到StockView由3个主要部分构成，分别是显示当前股票信息的StockInfo、设置显示曲线的StockSettingPanel、以及最后的绘图部分StockChart。
我们按顺序来看，StockInfo.qml:
~~~
import QtQuick 2.0
Rectangle { // 根项目是一个透明的Rectangle。为什么不用Item，我想可能是因为当时布局的时候把color设置出来可能更方便一些
id: root
width: 440
height: 160
color: "transparent"
property var stock: null // var类型的stock属性，它接受的是stocqt.qml中定义的StockModel
Text { // id
id: stockIdText
anchors.left: parent.left
anchors.leftMargin: 5
anchors.top: parent.top
anchors.topMargin: 15
color: "#000000"
font.family: "Open Sans"
font.pointSize: 38
font.weight: Font.DemiBold
text: root.stock.stockId // 类似的，对显示文本赋值
}
Text { // name
id: stockNameText
anchors.left: parent.left
anchors.leftMargin: 5
anchors.bottom: priceChangePercentage.bottom
anchors.right: priceChangePercentage.left
anchors.rightMargin: 15
color: "#000000"
font.family: "Open Sans"
font.pointSize: 16
elide: Text.ElideRight
text: root.stock.stockName
}
Text { // 价格
id: price
anchors.right: parent.right
anchors.rightMargin: 5
anchors.top: parent.top
anchors.topMargin: 15
horizontalAlignment: Text.AlignRight
color: "#000000"
font.family: "Open Sans"
font.pointSize: 30
font.weight: Font.DemiBold
text: root.stock.stockPrice
}
Text { // 价格变化
id: priceChange
anchors.right: parent.right
anchors.rightMargin: 20
anchors.top: price.bottom
anchors.topMargin: 5
horizontalAlignment: Text.AlignRight
color: root.stock.stockPriceChanged < 0 ? "#d40000" : "#328930"
font.family: "Open Sans"
font.pointSize: 20
font.weight: Font.Bold
text: root.stock.stockPriceChanged
}
Text { // 价格变化百分比
id: priceChangePercentage
anchors.right: parent.right
anchors.rightMargin: 20
anchors.top: priceChange.bottom
anchors.topMargin: 5
horizontalAlignment: Text.AlignRight
color: root.stock.stockPriceChanged < 0 ? "#d40000" : "#328930"
font.family: "Open Sans"
font.pointSize: 18
font.weight: Font.Bold
text: Math.abs(Math.round(root.stock.stockPriceChanged/(root.stock.stockPrice - root.stock.stockPriceChanged) * 100))/100 +"%"
}
}
~~~
stockSettingPanel.qml:
~~~
import QtQuick 2.0
Rectangle {
id: root
width: 440
height: 160
color: "transparent"
property bool drawOpenPrice: openButton.buttonEnabled // 对外的标志位
property bool drawClosePrice: closeButton.buttonEnabled
property bool drawHighPrice: highButton.buttonEnabled
property bool drawLowPrice: lowButton.buttonEnabled
property string openColor: "#face20" // 各曲线的颜色设置
property string closeColor: "#14aaff"
property string highColor: "#80c342"
property string lowColor: "#f30000"
property string volumeColor: "#14aaff" // 成交量绘制颜色
Text {
id: openText
anchors.left: root.left
anchors.top: root.top
color: "#000000"
font.family: "Open Sans"
font.pointSize: 19
text: "Open"
}
Text {
id: closeText
anchors.left: root.left
anchors.top: openText.bottom
anchors.topMargin: 10
color: "#000000"
font.family: "Open Sans"
font.pointSize: 19
text: "Close"
}
Text {
id: highText
anchors.left: root.left
anchors.top: closeText.bottom
anchors.topMargin: 10
color: "#000000"
font.family: "Open Sans"
font.pointSize: 19
text: "High"
}
Text {
id: lowText
anchors.left: root.left
anchors.top: highText.bottom
anchors.topMargin: 10
color: "#000000"
font.family: "Open Sans"
font.pointSize: 19
text: "Low"
}
Rectangle {
height: 4
anchors.left: root.left
anchors.leftMargin: 114
anchors.right: openButton.left
anchors.rightMargin: 65
anchors.verticalCenter: openText.verticalCenter
color: openColor
}
Rectangle {
height: 4
anchors.left: root.left
anchors.leftMargin: 114
anchors.right: closeButton.left
anchors.rightMargin: 65
anchors.verticalCenter: closeText.verticalCenter
color: closeColor
}
Rectangle {
height: 4
anchors.left: root.left
anchors.leftMargin: 114
anchors.right: highButton.left
anchors.rightMargin: 65
anchors.verticalCenter: highText.verticalCenter
color: highColor
}
Rectangle {
height: 4
anchors.left: root.left
anchors.leftMargin: 114
anchors.right: lowButton.left
anchors.rightMargin: 65
anchors.verticalCenter: lowText.verticalCenter
color: lowColor
}
CheckBox { // 自定义的CheckBox，提供了属性buttonEnabled表明是否被checked
id: openButton
buttonEnabled: false
anchors.verticalCenter: openText.verticalCenter
anchors.right: root.right
anchors.rightMargin: 40
}
CheckBox {
id: closeButton
buttonEnabled: false
anchors.verticalCenter: closeText.verticalCenter
anchors.right: root.right
anchors.rightMargin: 40
}
CheckBox {
id: highButton
buttonEnabled: true
anchors.verticalCenter: highText.verticalCenter
anchors.right: root.right
anchors.rightMargin: 40
}
CheckBox {
id: lowButton
buttonEnabled: true
anchors.verticalCenter: lowText.verticalCenter
anchors.right: root.right
anchors.rightMargin: 40
}
}
~~~
自定义的CheckBox.qml:
~~~
import QtQuick 2.0
Item {
id: button
property bool buttonEnabled: true
width: 30
height: 30
x: 5
MouseArea {
id: mouse
anchors.fill: parent
onClicked: {
if (buttonEnabled)
buttonEnabled = false;
else
buttonEnabled = true;
}
}
Rectangle {
id: checkbox
width: 30
height: 30
anchors.left: parent.left
border.color: "#999999"
border.width: 1
antialiasing: true
radius: 2
color: "transparent"
Rectangle {
anchors.fill: parent
anchors.margins: 5
antialiasing: true
radius: 1
color: mouse.pressed || buttonEnabled ? "#999999" : "transparent"
}
}
}
~~~
接着还有一个自定义的控件Button.qml，它在下面的StockChart将会用到:
~~~
import QtQuick 2.0
Rectangle {
id: button
signal clicked
property alias text: txt.text // 设置txt.text的属性别名为text，这样Rectangle就不用再声明一个属性以访问txt的text
property bool buttonEnabled: false
width: Math.max(64, txt.width + 16)
height: 32
color: "transparent"
MouseArea {
anchors.fill: parent
onClicked: button.clicked()
}
Text {
anchors.centerIn: parent
font.family: "Open Sans"
font.pointSize: 19
font.weight: Font.DemiBold
color: button.buttonEnabled ? "#000000" : "#14aaff"
id: txt
}
}
~~~
最终的绘制部分终于来了，StockChart.qml:
~~~
import QtQuick 2.0
Rectangle {
id: chart
width: 320
height: 200
property var stockModel: null
property var startDate: new Date() // new Date()初始化得到的是当前时间
property var endDate: new Date()
property string activeChart: "year" // 设置表格显示的时间跨度为一年
property var settings
property int gridSize: 4 // 每个网格宽度为4px
property real gridStep: gridSize ? (width - canvas.tickMargin) / gridSize : canvas.xGridStep // 网格数为（宽度 - 最右方那一栏的宽度）/ 网格宽度，如果gridSize为0，采用画布中的计算方式
function update() { // 更新函数
endDate = new Date();
if (chart.activeChart === "year") { // 显示一年数据
chart.startDate = new Date(chart.endDate.getFullYear() - 1, // 在当前时间的基础上减一年
chart.endDate.getMonth(),
chart.endDate.getDate());
chart.gridSize = 12; // 设置网格宽度为12，以固定网格数
}
else if (chart.activeChart === "month") { // 显示一个月数据
chart.startDate = new Date(chart.endDate.getFullYear(), // 在当前时间基础上减一个月
chart.endDate.getMonth() - 1,
chart.endDate.getDate());
gridSize = 0; // gridSize为0时，采用canvas中定义的网格宽度计算。使每个数据都绘制在坐标线上
}
else if (chart.activeChart === "week") { // 显示一周数据
chart.startDate = new Date(chart.endDate.getFullYear(), // 在当前时间基础上减七天
chart.endDate.getMonth(),
chart.endDate.getDate() - 7);
gridSize = 0;
}
else {
chart.startDate = new Date(2005, 3, 25); // 否则以2005年为初始年，并定义网格宽度为4
gridSize = 4;
}
canvas.requestPaint(); // 当更新时需要调用画布的这个函数
}
Row { // Row布局了4个自定义的按钮
id: activeChartRow
anchors.left: chart.left
anchors.right: chart.right
anchors.top: chart.top
anchors.topMargin: 4
spacing: 52
onWidthChanged: { // 该函数保证宽度变化时优先压缩spacing，且不会造成按钮重叠
var buttonsLen = maxButton.width + yearButton.width + monthButton.width + weekButton.width;
var space = (width - buttonsLen) / 3;
spacing = Math.max(space, 10);
}
Button {
id: maxButton
text: "Max"
buttonEnabled: chart.activeChart === "max"
onClicked: {
chart.activeChart = "max"; // 改变当前图表显示模式，这里的max 实际对应update中的'else'，即2005年作为起始年
chart.update(); // 更新
}
}
Button {
id: yearButton
text: "Year"
buttonEnabled: chart.activeChart === "year"
onClicked: {
chart.activeChart = "year";
chart.update();
}
}
Button {
id: monthButton
text: "Month"
buttonEnabled: chart.activeChart === "month"
onClicked: {
chart.activeChart = "month";
chart.update();
}
}
Button {
id: weekButton
text: "Week"
buttonEnabled: chart.activeChart === "week"
onClicked: {
chart.activeChart = "week";
chart.update();
}
}
}
Text { // 下方的起始日期显示
id: fromDate
color: "#000000"
font.family: "Open Sans"
font.pointSize: 8
anchors.left: parent.left
anchors.bottom: parent.bottom
text: "| " + startDate.toDateString()
}
Text { // 结束日期显示
id: toDate
color: "#000000"
font.family: "Open Sans"
font.pointSize: 8
anchors.right: parent.right
anchors.rightMargin: canvas.tickMargin
anchors.bottom: parent.bottom
text: endDate.toDateString() + " |"
}
Canvas { // 画布，基本上与HTML的Canvas相同
id: canvas
// 注释介绍将下面两行语句取消注释以获得OpenGL的硬件加速渲染，为什么没有开？有些平台不支持嘛...
// Uncomment below lines to use OpenGL hardware accelerated rendering.
// See Canvas documentation for available options.
//renderTarget: Canvas.FramebufferObject // 渲染到OpenGL的帧缓冲
//renderStrategy: Canvas.Threaded // 渲染工作在一个私有渲染线程中进行
anchors.top: activeChartRow.bottom // 作为Item的派生类型，我们同样可以设置它的布局与属性
anchors.left: parent.left
anchors.right: parent.right
anchors.bottom: fromDate.top
property int pixelSkip: 1
property int numPoints: 1 // 存储数据点的个数
property int tickMargin: 32 // 右边格的宽度
property real xGridStep: (width - tickMargin) / numPoints // 网格宽度
property real yGridOffset: height / 26 // y方向向下的偏移度，用在水平线的绘制
property real yGridStep: height / 12 // 网格高度
function drawBackground(ctx) { // 界面的绘制由onPaint开始，这是绘制背景的一个函数。ctx作为传参，类似C++中的painter
ctx.save(); // 保存之前绘制内容
ctx.fillStyle = "#ffffff"; // 填充颜色，之所以叫Style是因为它还可以使用渐变等等...
ctx.fillRect(0, 0, canvas.width, canvas.height); // fillRect是一个便利函数，用来填充一个矩形区域
ctx.strokeStyle = "#d7d7d7"; // 描边颜色
ctx.beginPath();
// 水平网格线
for (var i = 0; i < 12; i++) {
ctx.moveTo(0, canvas.yGridOffset + i * canvas.yGridStep);
ctx.lineTo(canvas.width, canvas.yGridOffset + i * canvas.yGridStep);
}
// 垂直网格线
var height = 35 * canvas.height / 36; // 垂直线的高度为画布高度的 35/36
var yOffset = canvas.height - height; // 垂直线离顶部距离为高度的 1/36
var xOffset = 0;
for (i = 0; i < chart.gridSize; i++) {
ctx.moveTo(xOffset + i * chart.gridStep, yOffset);
ctx.lineTo(xOffset + i * chart.gridStep, height);
}
ctx.stroke(); // 描线
// 右方以及下方颜色较深的那几根线
ctx.strokeStyle = "#666666";
ctx.beginPath();
var xStart = canvas.width - tickMargin; // x = 画布宽度 - 价格部分宽度
ctx.moveTo(xStart, 0);
ctx.lineTo(xStart, canvas.height); // 向下画直线
for (i = 0; i < 12; i++) {
ctx.moveTo(xStart, canvas.yGridOffset + i * canvas.yGridStep); // 12根短横线
ctx.lineTo(canvas.width, canvas.yGridOffset + i * canvas.yGridStep);
}
ctx.moveTo(0, canvas.yGridOffset + 9 * canvas.yGridStep); // 移动绘制点到第九根横线左端
ctx.lineTo(canvas.width, canvas.yGridOffset + 9 * canvas.yGridStep); // 向右绘制横线
ctx.closePath(); // 完成路径
ctx.stroke(); // 描边
ctx.restore(); // 载入保存的内容
}
function drawScales(ctx, high, low, vol) // 绘制右方股票价格标尺函数
{
ctx.save();
ctx.strokeStyle = "#888888";
ctx.font = "10px Open Sans"
ctx.beginPath();
// prices on y-axis
var x = canvas.width - tickMargin + 3; // 离右边实线3px
var priceStep = (high - low) / 9.0; // 相隔最高价与最低价的差值除以9
for (var i = 0; i < 10; i += 2) { // 隔一级显示
var price = parseFloat(high - i * priceStep).toFixed(1);
ctx.text(price, x, canvas.yGridOffset + i * yGridStep - 2); // 绘制text的坐标在文字的左下角
}
// highest volume
ctx.text(vol, 0, canvas.yGridOffset + 9 * yGridStep + 12); // 绘制最高成交量
ctx.closePath();
ctx.stroke();
ctx.restore();
}
function drawPrice(ctx, from, to, color, price, points, highest, lowest) // 数据曲线绘制
{
ctx.save();
ctx.globalAlpha = 0.7; // 透明度
ctx.strokeStyle = color; // color由StockSettingPanel指定
ctx.lineWidth = 3;
ctx.beginPath();
var end = points.length; // 数据长度
var range = highest - lowest; // 取值范围
if (range == 0) {
range = 1; // range作为被除数不能为0
}
for (var i = 0; i < end; i += pixelSkip) {
var x = points[i].x;
var y = points[i][price]; // 取出对应设置的价格数据
var h = 9 * yGridStep; // 设置绘制高度为九倍的网格高度
y = h * (lowest - y)/range + h + yGridOffset; // lowest - y为非正数，h + yGridOffset为曲线绘制的底部
if (i == 0) {
ctx.moveTo(x, y); // 移动到初始点
} else {
ctx.lineTo(x, y); // 向后绘制
}
}
ctx.stroke();
ctx.restore();
}
function drawVolume(ctx, from, to, color, price, points, highest) // 成交量绘制函数
{
ctx.save();
ctx.fillStyle = color;
ctx.globalAlpha = 0.8;
ctx.lineWidth = 0; // 由于线宽影响绘制边界(参考HTML)，这里将线宽设置为0
ctx.beginPath();
var end = points.length;
var margin = 0;
if (chart.activeChart === "month" || chart.activeChart === "week") {
margin = 8;
ctx.shadowOffsetX = 4; // x方向的阴影
ctx.shadowBlur = 3.5; // 模糊效果
ctx.shadowColor = Qt.darker(color);
}
// 由于柱状图的宽度限制，柱状图比实际的数据少一个
// To match the volume graph with price grid, skip drawing the initial
// volume of the first day on chart.
for (var i = 1; i < end; i += pixelSkip) {
var x = points[i - 1].x;
var y = points[i][price];
y = canvas.height * (y / highest);
y = 3 * y / 12; // 柱状图高度占画布的1/4
ctx.fillRect(x, canvas.height - y + yGridOffset,
canvas.xGridStep - margin, y); // "周"与"月"时有间隔，其他则没有
}
ctx.stroke();
ctx.restore();
}
onPaint: { // 绘制入口
if (!stockModel.ready) { // 等待数据完成
return;
}
numPoints = stockModel.indexOf(chart.startDate); // 由StockModel取得startDate到现在的数据数
if (chart.gridSize == 0)
chart.gridSize = numPoints // 使gridStep绑定到(width - canvas.tickMargin) / numPoints上
var ctx = canvas.getContext("2d"); // 创建ctx
ctx.globalCompositeOperation = "source-over"; // 混合模式
ctx.lineWidth = 1;
drawBackground(ctx); // 背景绘制
var highestPrice = 0;
var highestVolume = 0;
var lowestPrice = -1;
var points = []; // 创建一个数组
for (var i = numPoints, j = 0; i >= 0 ; i -= pixelSkip, j += pixelSkip) { // pixelSkip被定义为 1
var price = stockModel.get(i);
if (parseFloat(highestPrice) < parseFloat(price.high)) // 得到最高价
highestPrice = price.high;
if (parseInt(highestVolume, 10) < parseInt(price.volume, 10)) // 得到最低价
highestVolume = price.volume;
if (lowestPrice < 0 || parseFloat(lowestPrice) > parseFloat(price.low)) // 注意这里如果设置lowestPrice = 0或是别的数
lowestPrice = price.low; // 就有可能一直无法满足条件，因此添加这个负数使第一个price.low被赋予lowestPrice
points.push({ // 插入数据，它类似于Model，但多了一个 x 的坐标值
x: j * xGridStep,
open: price.open,
close: price.close,
high: price.high,
low: price.low,
volume: price.volume
});
}
if (settings.drawHighPrice) // 判断StockSettingPanel中相应的选项是否被勾选，然后绘制数据线段
drawPrice(ctx, 0, numPoints, settings.highColor, "high", points, highestPrice, lowestPrice);
if (settings.drawLowPrice)
drawPrice(ctx, 0, numPoints, settings.lowColor, "low", points, highestPrice, lowestPrice);
if (settings.drawOpenPrice)
drawPrice(ctx, 0, numPoints,settings.openColor, "open", points, highestPrice, lowestPrice);
if (settings.drawClosePrice)
drawPrice(ctx, 0, numPoints, settings.closeColor, "close", points, highestPrice, lowestPrice);
drawVolume(ctx, 0, numPoints, settings.volumeColor, "volume", points, highestVolume); // 成交量绘制
drawScales(ctx, highestPrice, lowestPrice, highestVolume); // 价格标尺绘制
}
}
}
~~~