|
|
|
步骤 2 : 模仿和排错 步骤 3 : view.html 步骤 4 : chart 对象 步骤 5 : data4Vue 步骤 6 : 调用 simulate函数 步骤 7 : simulate函数 步骤 8 : chart4Profit 对象 步骤 9 : html
老规矩，先下载右上角的可运行项目，配置运行起来，确认可用之后，再学习做了哪些步骤以达到这样的效果。
先启动 EurekaServerApplication 跟着启动 IndexCodesApplication 然后启动 IndexDataApplication 接着启动 TrendTradingBackTestServiceApplication 随后启动 TrendTradingBackTestViewApplication 最后启动 IndexZuulServiceApplication 注： 记得运行redis-server.exe 以启动 redis 服务器 然后访问地址： http://127.0.0.1:8031/api-view/ 于是就可以看到在视图上看到指数曲线图了
在确保可运行项目能够正确无误地运行之后，再严格照着教程的步骤，对代码模仿一遍。
模仿过程难免代码有出入，导致无法得到期望的运行结果，此时此刻通过比较正确答案 ( 可运行项目 ) 和自己的代码，来定位问题所在。 采用这种方式，学习有效果，排错有效率，可以较为明显地提升学习速度，跨过学习路上的各个槛。 推荐使用diffmerge软件，进行文件夹比较。把你自己做的项目文件夹，和我的可运行项目文件夹进行比较。 这个软件很牛逼的，可以知道文件夹里哪两个文件不对，并且很明显地标记出来 这里提供了绿色安装和使用教程：diffmerge 下载和使用教程
为了达到这个效果，对 view 做了挺多的改动。 这里先给出结果，后面挨个讲解有哪些改动。
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="include/header::html('趋势投资模拟回测')" ></head>
<body >
<script>
var chart4Profit = null;
$(function(){
var data4Vue = {
indexes: [],
currentIndex: '000300',
indexDatas:[],
dates:[],
closePoints:[],
};
//ViewModel
var vue = new Vue({
el: '#workingArea',
data: data4Vue,
mounted:function(){ //mounted 表示这个 Vue 对象加载成功了
this.init();
$("[data-toggle='tooltip']").tooltip();
},
methods: {
init:function(){
var url = "http://127.0.0.1:8031/api-codes/codes";
axios.get(url).then(function(response) {
vue.indexes = response.data;
vue.$nextTick(function(){
vue.simulate();
});
});
},
simulate:function(){
var url = "http://127.0.0.1:8031/api-backtest/simulate/"+vue.currentIndex;
axios.get(url).then(function(response) {
//清空原数据
vue.indexDatas = [];
vue.dates = [];
vue.closePoints = [];
//获取返回数据
vue.indexDatas = response.data.indexDatas;
vue.dates = new Array();
vue.closePoints = new Array();
//指数数据
for(i in vue.indexDatas){
var indexData = vue.indexDatas[i];
vue.dates.push(indexData.date);
vue.closePoints.push(indexData.closePoint);
}
//收益图标
chart4Profit.config.data.labels = vue.dates;
chart4Profit.config.data.datasets[0].label = vue.currentIndex;
chart4Profit.config.data.datasets[0].data = vue.closePoints;
chart4Profit.update();
});
},
}
});
var ctx4Profit = $(".canvas4Profit")[0].getContext('2d');
chart4Profit = new Chart(ctx4Profit, {
type: 'line',
data: {
labels: '',
datasets: [
{
label: '',
data: [],
borderColor: '#FF4040',
backgroundColor: '#FF4040',
borderWidth: 1.2,
pointRadius: 0,
fill: false,
lineTension: 0,
}
]
},
options: {
title: {
display: true,
text: '指数趋势投资收益对比图'
},
responsive: true,
responsiveAnimationDuration:3000,
scales: {
yAxes: [{
ticks: {
beginAtZero: false,
}
}]
},
tooltips: {
intersect: false,
mode: 'index',
// axis: 'y',
callbacks: {
label: function(tooltipItem, myData) {
var label = myData.datasets[tooltipItem.datasetIndex].label || '';
if (label) {
label += ': ';
}
label += parseFloat(tooltipItem.value).toFixed(2);
return label;
}
}
}
}
});
});
</script>
<style>
table.inputTable{
width:100%;
}
table.inputTable td{
padding:20px 20px;
}
table{
margin:20px;
}
div#workingArea{
margin:50px;
}
</style>
<div id="workingArea">
<span class="label label-info">回测参数</span>
<table class="inputTable ">
<tr>
<td width="25%">
<span data-toggle="tooltip" data-placement="top" title="选择某一个指数进行模拟回测">
请选择指数:<span class="glyphicon glyphicon-question-sign" > </span>
</span>
</td>
<td width="25%">
<select v-model="currentIndex" class="indexSelect form-control">
<option v-for="bean in indexes " :value="bean.code">{{bean.name}} - ( {{bean.code}} )</option>
</select>
</td>
<td></td>
<td></td>
</tr>
</table>
<div class="label label-warning">收益对比图</div>
<div class="div4chart" style="margin:0px auto; width:80%">
<canvas class='canvas4Profit'></canvas>
</div>
</div>
<div th:replace="include/footer::html" ></div>
</body>
</html>
为了能够显示图表，需要用到 chartjs 这个第三方工具。 为了讲解本教程，站长特意提前准备了 chartjs 教程。
首先在开始声明了 chart4Profit 这个对象，它就代表图标对象。 var chart4Profit = null;
data4Vue 里多了3个对象
indexDatas:[], dates:[], closePoints:[], indexDatas 就表示指数数据数组。 dates 代表日期数组。 closePoints 代表收盘点数组。
声明了 simulate函数，并通过 $nextTick 方式调用。 $nextTick 是什么意思呢？ 就是通过 ajax 拿到指数数据之后，并且在页面上选完完成之后的回调函数。
vue.$nextTick(function(){ vue.simulate(); });
simulate函数 做了如下事情：
1. 通过 ajax 访问 http://127.0.0.1:8031/api-backtest/simulate/000300 2. 拿到数据之后首先进行清空处理 vue.indexDatas = []; 3. 获取数据，并放在 data4Vue里： vue.indexDatas = response.data.indexDatas; 4. 根据指数数据 vue.indexDatas, 组合出图表需要的 日期和收盘点数组。 vue.dates = new Array(); vue.closePoints = new Array(); for(i in vue.indexDatas){ var indexData = vue.indexDatas[i]; vue.dates.push(indexData.date); vue.closePoints.push(indexData.closePoint); } 5. 刷新图表 chart4Profit.config.data.labels = vue.dates; chart4Profit.config.data.datasets[0].label = vue.currentIndex; chart4Profit.config.data.datasets[0].data = vue.closePoints; chart4Profit.update(); simulate:function(){
var url = "http://127.0.0.1:8031/api-backtest/simulate/"+vue.currentIndex;
axios.get(url).then(function(response) {
//清空原数据
vue.indexDatas = [];
//获取返回数据
vue.indexDatas = response.data.indexDatas;
vue.dates = new Array();
vue.closePoints = new Array();
for(i in vue.indexDatas){
var indexData = vue.indexDatas[i];
vue.dates.push(indexData.date);
vue.closePoints.push(indexData.closePoint);
}
// console.log("chart4Profit:"+chart4Profit);
chart4Profit.config.data.labels = vue.dates;
chart4Profit.config.data.datasets[0].label = vue.currentIndex;
chart4Profit.config.data.datasets[0].data = vue.closePoints;
chart4Profit.update();
});
},
1. 通过 $(".canvas4Profit")[0].getContext('2d') 拿到画布对应的上下文
2. 基于上下文，创建 chart4Profit 对象 3. 类型是 ‘line’： 曲线图 4. 设置相关参数，如颜色，宽度，是否填充等等 5. 设置标题为 指数趋势投资收益对比图 6. responsive：true 表示有新数据的时候会重新画 7. intersect: false和 mode: 'index', 表示 当鼠标移动的时候会自动显示提示信息 8. callbacks: 表示提示信息的格式是： 标签名 ： 取两位小数的数值 var ctx4Profit = $(".canvas4Profit")[0].getContext('2d');
chart4Profit = new Chart(ctx4Profit, {
type: 'line',
data: {
labels: '',
datasets: [
{
label: '',
data: [],
borderColor: '#FF4040',
backgroundColor: '#FF4040',
borderWidth: 1.2,
pointRadius: 0,
fill: false,
lineTension: 0,
}
]
},
options: {
title: {
display: true,
text: '指数趋势投资收益对比图'
},
responsive: true,
responsiveAnimationDuration:3000,
scales: {
yAxes: [{
ticks: {
beginAtZero: false,
}
}]
},
tooltips: {
intersect: false,
mode: 'index',
callbacks: {
label: function(tooltipItem, myData) {
var label = myData.datasets[tooltipItem.datasetIndex].label || '';
if (label) {
label += ': ';
}
label += parseFloat(tooltipItem.value).toFixed(2);
return label;
}
}
}
}
});
主要增加一个画布：
<canvas class='canvas4Profit'></canvas> <div class="label label-warning">收益对比图</div>
<div class="div4chart" style="margin:0px auto; width:80%">
<canvas class='canvas4Profit'></canvas>
</div>
<div class="label label-warning">收益对比图</div>
<div class="div4chart" style="margin:0px auto; width:80%">
<canvas class='canvas4Profit'></canvas>
</div>
HOW2J公众号，关注后实时获知最新的教程和优惠活动，谢谢。
提问之前请登陆
提问已经提交成功，正在审核。 请于 我的提问 处查看提问记录，谢谢
|
