Site updated: 2022-12-02 15:41:04

This commit is contained in:
qinglong committed 2022-12-02 15:41:05 +08:00
1 parent 59398f80a3
commit d22bde1559
132 files changed
+144 -140

No files matched your search

+3 -3
View File
@@ -11,14 +11,14 @@
"url": "https://blog.jingxiyuan.cn/2022/12/02/KLineChart%E5%AE%9E%E7%8E%B0%E8%87%AA%E5%AE%9A%E4%B9%89%E6%8C%87%E6%A0%87%E7%94%BB%E5%9B%BE/",
"title": "KLineChart实现自定义指标画图",
"date_published": "2022-12-02T07:16:00.000Z",
"content_html": "<h4 id=\"引言\"><a class=\"anchor\" href=\"#引言\">#</a> 引言</h4>\n<p>本次任务是需要在一个指标上点击标记后画出此标记参与计算的范围、参考线等等,于是有了以下代码。代码仅供参考,如有错误的地方请指正!<br />\n<img data-src=\"https://nas.jingxiyuan.cn:18014/images/2022/12/02/7fd440be0502d0099427e7c74c4ebf29.jpg\" alt=\"7fd440be0502d0099427e7c74c4ebf29.jpg\" /></p>\n<figure class=\"highlight js\"><figcaption data-lang=\"JavaScript\"></figcaption><table><tr><td data-num=\"1\"></td><td><pre><span class=\"token comment\">// 箱体指标</span></pre></td></tr><tr><td data-num=\"2\"></td><td><pre><span class=\"token keyword\">const</span> boxDataScope <span class=\"token operator\">=</span> <span class=\"token number\">300</span> <span class=\"token comment\">// 箱体范围</span></pre></td></tr><tr><td data-num=\"3\"></td><td><pre><span class=\"token comment\">// 黄金线参数</span></pre></td></tr><tr><td data-num=\"4\"></td><td><pre><span class=\"token keyword\">const</span> goldenSectionA <span class=\"token operator\">=</span> <span class=\"token number\">0.191</span></pre></td></tr><tr><td data-num=\"5\"></td><td><pre><span class=\"token keyword\">const</span> goldenSectionB <span class=\"token operator\">=</span> <span class=\"token number\">0.382</span></pre></td></tr><tr><td data-num=\"6\"></td><td><pre><span class=\"token keyword\">const</span> goldenSectionC <span class=\"token operator\">=</span> <span class=\"token number\">0.5</span></pre></td></tr><tr><td data-num=\"7\"></td><td><pre><span class=\"token keyword\">const</span> goldenSectionD <span class=\"token operator\">=</span> <span class=\"token number\">0.618</span></pre></td></tr><tr><td data-num=\"8\"></td><td><pre><span class=\"token keyword\">const</span> goldenSectionE <span class=\"token operator\">=</span> <span class=\"token number\">0.809</span></pre></td></tr><tr><td data-num=\"9\"></td><td><pre><span class=\"token keyword\">this</span><span class=\"token punctuation\">.</span>chart<span class=\"token punctuation\">.</span><span class=\"token function\">addTechnicalIndicatorTemplate</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">&#123;</span></pre></td></tr><tr><td data-num=\"10\"></td><td><pre>\t<span class=\"token literal-property property\">name</span><span class=\"token operator\">:</span> <span class=\"token string\">'custom_box_solid'</span><span class=\"token punctuation\">,</span></pre></td></tr><tr><td data-num=\"11\"></td><td><pre> <span class=\"token literal-property property\">shortName</span><span class=\"token operator\">:</span> <span class=\"token string\">'箱体'</span><span class=\"token punctuation\">,</span></pre></td></tr><tr><td data-num=\"12\"></td><td><pre> <span class=\"token literal-property property\">precision</span><span class=\"token operator\">:</span> <span class=\"token number\">2</span><span class=\"token punctuation\">,</span></pre></td></tr><tr><td data-num=\"13\"></td><td><pre> <span class=\"token literal-property property\">plots</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">[</span> <span class=\"token comment\">//key 属性的值最好在主图数据范围内,否则 Y 轴的值会跟着变大可能会导致主图变成一条线</span></pre></td></tr><tr><td data-num=\"14\"></td><td><pre> <span class=\"token punctuation\">&#123;</span> <span class=\"token literal-property property\">key</span><span class=\"token operator\">:</span> <span class=\"token string\">'max'</span><span class=\"token punctuation\">,</span> <span class=\"token literal-property property\">title</span><span class=\"token operator\">:</span> <span class=\"token string\">'最高:'</span> <span class=\"token punctuation\">&#125;</span><span class=\"token punctuation\">,</span></pre></td></tr><tr><td data-num=\"15\"></td><td><pre> <span class=\"token punctuation\">&#123;</span> <span class=\"token literal-property property\">key</span><span class=\"token operator\">:</span> <span class=\"token string\">'min'</span><span class=\"token punctuation\">,</span> <span class=\"token literal-property property\">title</span><span class=\"token operator\">:</span> <span class=\"token string\">'最低:'</span> <span class=\"token punctuation\">&#125;</span></pre></td></tr><tr><td data-num=\"16\"></td><td><pre> <span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span></pre></td></tr><tr><td data-num=\"17\"></td><td><pre> <span class=\"token literal-property property\">calcParams</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">[</span>boxDataScope<span class=\"token punctuation\">,</span> goldenSectionA<span class=\"token punctuation\">,</span> goldenSectionB<span class=\"token punctuation\">,</span> goldenSectionC<span class=\"token punctuation\">,</span> goldenSectionD<span class=\"tLine truncated
"content_html": "<h4 id=\"引言\"><a class=\"anchor\" href=\"#引言\">#</a> 引言</h4>\n<p>本次任务是需要在一个指标图上通过点击标记画出此标记参与计算的数据范围、最高最低值、参考线等等,于是有了以下代码。代码仅供参考,如有错误的地方请指正!<br />\n<img data-src=\"https://nas.jingxiyuan.cn:18014/images/2022/12/02/7fd440be0502d0099427e7c74c4ebf29.jpg\" alt=\"7fd440be0502d0099427e7c74c4ebf29.jpg\" /></p>\n<h4 id=\"模版代码\"><a class=\"anchor\" href=\"#模版代码\">#</a> 模版代码</h4>\n<figure class=\"highlight js\"><figcaption data-lang=\"JavaScript\"></figcaption><table><tr><td data-num=\"1\"></td><td><pre><span class=\"token comment\">// 箱体指标</span></pre></td></tr><tr><td data-num=\"2\"></td><td><pre><span class=\"token keyword\">const</span> boxDataScope <span class=\"token operator\">=</span> <span class=\"token number\">300</span> <span class=\"token comment\">// 箱体范围</span></pre></td></tr><tr><td data-num=\"3\"></td><td><pre><span class=\"token comment\">// 黄金线参数</span></pre></td></tr><tr><td data-num=\"4\"></td><td><pre><span class=\"token keyword\">const</span> goldenSectionA <span class=\"token operator\">=</span> <span class=\"token number\">0.191</span></pre></td></tr><tr><td data-num=\"5\"></td><td><pre><span class=\"token keyword\">const</span> goldenSectionB <span class=\"token operator\">=</span> <span class=\"token number\">0.382</span></pre></td></tr><tr><td data-num=\"6\"></td><td><pre><span class=\"token keyword\">const</span> goldenSectionC <span class=\"token operator\">=</span> <span class=\"token number\">0.5</span></pre></td></tr><tr><td data-num=\"7\"></td><td><pre><span class=\"token keyword\">const</span> goldenSectionD <span class=\"token operator\">=</span> <span class=\"token number\">0.618</span></pre></td></tr><tr><td data-num=\"8\"></td><td><pre><span class=\"token keyword\">const</span> goldenSectionE <span class=\"token operator\">=</span> <span class=\"token number\">0.809</span></pre></td></tr><tr><td data-num=\"9\"></td><td><pre><span class=\"token keyword\">this</span><span class=\"token punctuation\">.</span>chart<span class=\"token punctuation\">.</span><span class=\"token function\">addTechnicalIndicatorTemplate</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">&#123;</span></pre></td></tr><tr><td data-num=\"10\"></td><td><pre>\t<span class=\"token literal-property property\">name</span><span class=\"token operator\">:</span> <span class=\"token string\">'custom_box_solid'</span><span class=\"token punctuation\">,</span></pre></td></tr><tr><td data-num=\"11\"></td><td><pre> <span class=\"token literal-property property\">shortName</span><span class=\"token operator\">:</span> <span class=\"token string\">'箱体'</span><span class=\"token punctuation\">,</span></pre></td></tr><tr><td data-num=\"12\"></td><td><pre> <span class=\"token literal-property property\">precision</span><span class=\"token operator\">:</span> <span class=\"token number\">2</span><span class=\"token punctuation\">,</span></pre></td></tr><tr><td data-num=\"13\"></td><td><pre> <span class=\"token literal-property property\">plots</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">[</span> <span class=\"token comment\">//key 属性的值最好在主图数据范围内,否则 Y 轴的值会跟着变大可能会导致主图变成一条线</span></pre></td></tr><tr><td data-num=\"14\"></td><td><pre> <span class=\"token punctuation\">&#123;</span> <span class=\"token literal-property property\">key</span><span class=\"token operator\">:</span> <span class=\"token string\">'max'</span><span class=\"token punctuation\">,</span> <span class=\"token literal-property property\">title</span><span class=\"token operator\">:</span> <span class=\"token string\">'最高:'</span> <span class=\"token punctuation\">&#125;</span><span class=\"token punctuation\">,</span></pre></td></tr><tr><td data-num=\"15\"></td><td><pre> <span class=\"token punctuation\">&#123;</span> <span class=\"token literal-property property\">key</span><span class=\"token operator\">:</span> <span class=\"token string\">'min'</span><span class=\"token punctuation\">,</span> <span class=\"token literal-property property\">title</span><span class=\"token operator\">:</span> <span class=\"token string\">'最低:'</span> <span class=\"token punctuation\">&#125;</span></pre></td></tr><tr><td data-num=\"16\"></td><td><pre> <span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span></pre></td></tr><tr><td data-num=\"17\"></td><td><pre> <span class=\"token literal-property property\">calcParams</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">[</span>boxDataScope<span class=\"token punctuation\">,</span> goldenSectionA<span class=\"token punctuation\">,</span> goldenSectionB<span cLine truncated
"tags": [
"工作",
"解决问题",
"KLineChart",
"KLineChart",
"自定义指标",
"K线"
"K线",
"自定义指标"
]
},
{