1 line
47 KiB
HTML
1 line
47 KiB
HTML
<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=2"><meta name="theme-color" content="#FFF"><link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon.png"><link rel="icon" type="image/ico" sizes="32x32" href="/images/favicon.ico"><meta http-equiv="Cache-Control" content="no-transform"><meta http-equiv="Cache-Control" content="no-siteapp"><link rel="alternate" type="application/rss+xml" title="涛声依旧" href="https://hitoli.com/rss.xml"><link rel="alternate" type="application/atom+xml" title="涛声依旧" href="https://hitoli.com/atom.xml"><link rel="alternate" type="application/json" title="涛声依旧" href="https://hitoli.com/feed.json"><link rel="stylesheet" href="//fonts.googleapis.com/css?family=Mulish:300,300italic,400,400italic,700,700italic%7CFredericka%20the%20Great:300,300italic,400,400italic,700,700italic%7CNoto%20Serif%20JP:300,300italic,400,400italic,700,700italic%7CNoto%20Serif%20SC:300,300italic,400,400italic,700,700italic%7CInconsolata:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext"><link rel="stylesheet" href="/css/app.css?v=0.0.0"><meta name="keywords" content="KLineChart,K线,自定义指标"><link rel="canonical" href="https://hitoli.com/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 实现自定义指标画图 - KLineChart - 工作 | ☆∵∴Hito∴∵★ = 涛声依旧 = 天下事有难易乎？为之，则难者亦易矣</title><meta name="generator" content="Hexo 7.0.0"></head><body itemscope itemtype="http://schema.org/WebPage"><div id="loading"><div class="cat"><div class="body"></div><div class="head"><div class="face"></div></div><div class="foot"><div class="tummy-end"></div><div class="bottom"></div><div class="legs left"></div><div class="legs right"></div></div><div class="paw"><div class="hands left"></div><div class="hands right"></div></div></div></div><div id="container"><header id="header" itemscope itemtype="http://schema.org/WPHeader"><div class="inner"><div id="brand"><div class="pjax"><h1 itemprop="name headline">KLineChart 实现自定义指标画图</h1><div class="meta"><span class="item" title="创建时间：2022-12-02 15:16:00"><span class="icon"><i class="ic i-calendar"></i> </span><span class="text">发表于</span> <time itemprop="dateCreated datePublished" datetime="2022-12-02T15:16:00+08:00">2022-12-02</time> </span><span class="item" title="本文字数"><span class="icon"><i class="ic i-pen"></i> </span><span class="text">本文字数</span> <span>4.9k</span> <span class="text">字</span> </span><span class="item" title="阅读时长"><span class="icon"><i class="ic i-clock"></i> </span><span class="text">阅读时长</span> <span>4 分钟</span></span></div></div></div><nav id="nav"><div class="inner"><div class="toggle"><div class="lines" aria-label="切换导航栏"><span class="line"></span> <span class="line"></span> <span class="line"></span></div></div><ul class="menu"><li class="item title"><a href="/" rel="start">☆∵∴Hito∴∵★</a></li></ul><ul class="right"><li class="item theme"><i class="ic i-sun"></i></li><li class="item search"><i class="ic i-search"></i></li></ul></div></nav></div><div id="imgs" class="pjax"><ul><li class="item" data-background-image="https://nas.hitoli.com:18014/images/2022/10/29/6833939bly1giclize41wj20zk0m87gk.jpg"></li><li class="item" data-background-image="https://nas.hitoli.com:18014/images/2022/10/29/6833939bly1gipeubcbajj20zk0m8h1h.jpg"></li><li class="item" data-background-image="https://nas.hitoli.com:18014/images/2022/10/29/6833939bly1gipexj2jgzj20zk0m8b09.jpg"></li><li class="item" data-background-image="https://nas.hitoli.com:18014/images/2022/10/29/6833939bly1giclfdu6exj20zk0m87hw.jpg"></li><li class="item" data-background-image="https://nas.hitoli.com:18014/images/2022/10/29/6833939bly1giclflwv2aj20zk0m84qp.jpg"></li><li class="item" data-background-image="https://nas.hitoli.com:18014/images/2022/10/29/6833939bly1giclh3brzpj20zk0m8ann.jpg"></li></ul></div></header><div id="waves"><svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto"><defs><path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z"/></defs><g class="parallax"><use xlink:href="#gentle-wave" x="48" y="0"/><use xlink:href="#gentle-wave" x="48" y="3"/><use xlink:href="#gentle-wave" x="48" y="5"/><use xlink:href="#gentle-wave" x="48" y="7"/></g></svg></div><main><div class="inner"><div id="main" class="pjax"><div class="article wrap"><div class="breadcrumb" itemscope itemtype="https://schema.org/BreadcrumbList"><i class="ic i-home"></i> <span><a href="/">首页</a></span><i class="ic i-angle-right"></i> <span itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem"><a href="/categories/%E5%B7%A5%E4%BD%9C/" itemprop="item" rel="index" title="分类于 工作"><span itemprop="name">工作</span></a><meta itemprop="position" content="1"></span><i class="ic i-angle-right"></i> <span class="current" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem"><a href="/categories/%E5%B7%A5%E4%BD%9C/KLineChart/" itemprop="item" rel="index" title="分类于 KLineChart"><span itemprop="name">KLineChart</span></a><meta itemprop="position" content="2"></span></div><article itemscope itemtype="http://schema.org/Article" class="post block" lang="zh-CN"><link itemprop="mainEntityOfPage" href="https://hitoli.com/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/"><span hidden itemprop="author" itemscope itemtype="http://schema.org/Person"><meta itemprop="image" content="/images/avatar.jpg"><meta itemprop="name" content="Hito Li"><meta itemprop="description" content="天下事有难易乎？为之，则难者亦易矣, 天生我材必有用"></span><span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization"><meta itemprop="name" content="涛声依旧"></span><div class="body md" itemprop="articleBody"><h4 id="引言"><a class="anchor" href="#引言">#</a> 引言</h4><p>本次任务是需要在一个指标图上通过点击标记画出此标记参与计算的数据范围、最高最低值、参考线等等，于是有了以下代码。代码仅供参考，如有错误的地方请指正！<br><img data-src="https://nas.hitoli.com:18014/images/2022/12/02/7fd440be0502d0099427e7c74c4ebf29.jpg" alt="7fd440be0502d0099427e7c74c4ebf29.jpg"></p><h4 id="模版代码"><a class="anchor" href="#模版代码">#</a> 模版代码</h4><p></p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br><span class="line">149</span><br><span class="line">150</span><br><span class="line">151</span><br><span class="line">152</span><br><span class="line">153</span><br><span class="line">154</span><br><span class="line">155</span><br><span class="line">156</span><br><span class="line">157</span><br><span class="line">158</span><br><span class="line">159</span><br><span class="line">160</span><br><span class="line">161</span><br><span class="line">162</span><br><span class="line">163</span><br><span class="line">164</span><br><span class="line">165</span><br><span class="line">166</span><br><span class="line">167</span><br><span class="line">168</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 箱体指标</span></span><br><span class="line"><span class="keyword">const</span> boxDataScope = <span class="number">300</span> <span class="comment">//箱体范围</span></span><br><span class="line"><span class="comment">// 黄金线参数</span></span><br><span class="line"><span class="keyword">const</span> goldenSectionA = <span class="number">0.191</span></span><br><span class="line"><span class="keyword">const</span> goldenSectionB = <span class="number">0.382</span></span><br><span class="line"><span class="keyword">const</span> goldenSectionC = <span class="number">0.5</span></span><br><span class="line"><span class="keyword">const</span> goldenSectionD = <span class="number">0.618</span></span><br><span class="line"><span class="keyword">const</span> goldenSectionE = <span class="number">0.809</span></span><br><span class="line"><span class="variable language_">this</span>.<span class="property">chart</span>.<span class="title function_">addTechnicalIndicatorTemplate</span>({</span><br><span class="line"> <span class="attr">name</span>: <span class="string">'custom_box_solid'</span>,</span><br><span class="line"> <span class="attr">shortName</span>: <span class="string">'箱体'</span>,</span><br><span class="line"> <span class="attr">precision</span>: <span class="number">2</span>,</span><br><span class="line"> <span class="attr">plots</span>: [ <span class="comment">// key属性的值最好在主图数据范围内，否则Y轴的值会跟着变大可能会导致主图变成一条线</span></span><br><span class="line"> { <span class="attr">key</span>: <span class="string">'max'</span>, <span class="attr">title</span>: <span class="string">'最高：'</span> },</span><br><span class="line"> { <span class="attr">key</span>: <span class="string">'min'</span>, <span class="attr">title</span>: <span class="string">'最低：'</span> }</span><br><span class="line"> ],</span><br><span class="line"> <span class="attr">calcParams</span>: [boxDataScope, goldenSectionA, goldenSectionB, goldenSectionC, goldenSectionD, goldenSectionE],</span><br><span class="line"> <span class="attr">calcTechnicalIndicator</span>: <span class="function">(<span class="params">dataList, { params, plots }</span>) =></span> {</span><br><span class="line"> <span class="keyword">let</span> allDatas = [] <span class="comment">// 所有数据</span></span><br><span class="line"> <span class="keyword">let</span> selectedDatas = [] <span class="comment">//选中的数据</span></span><br><span class="line"> <span class="keyword">for</span> (<span class="keyword">let</span> i = <span class="number">0</span>; i < dataList.<span class="property">length</span>; i++) {</span><br><span class="line"> <span class="keyword">let</span> kLineData = dataList[i]</span><br><span class="line"> <span class="keyword">if</span> (<span class="keyword">new</span> <span class="title class_">Date</span>(<span class="title function_">dateConvert</span>(kLineData.<span class="property">timestamp</span>)).<span class="title function_">getTime</span>() === <span class="title function_">getGlobalObject</span>(<span class="string">'boxId'</span>)) {</span><br><span class="line"> <span class="keyword">const</span> size = params[<span class="number">0</span>]</span><br><span class="line"> <span class="comment">// 找出当前数据往前的size条数据（包含自己）</span></span><br><span class="line"> <span class="keyword">let</span> startData = i - size + <span class="number">1</span></span><br><span class="line"> <span class="keyword">if</span> (startData < <span class="number">0</span>) {</span><br><span class="line"> startData = <span class="number">0</span></span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">let</span> endData = i + <span class="number">1</span></span><br><span class="line"> <span class="keyword">if</span> (endData > dataList.<span class="property">length</span>) {</span><br><span class="line"> endData = dataList.<span class="property">length</span></span><br><span class="line"> }</span><br><span class="line"> selectedDatas = dataList.<span class="title function_">slice</span>(startData, endData)</span><br><span class="line"> }</span><br><span class="line"> allDatas.<span class="title function_">push</span>({</span><br><span class="line"> <span class="attr">timestamp</span>: kLineData.<span class="property">timestamp</span></span><br><span class="line"> })</span><br><span class="line"> }</span><br><span class="line"> <span class="comment">// 找出选中数据中最高最低差价</span></span><br><span class="line"> <span class="keyword">let</span> max, min</span><br><span class="line"> selectedDatas.<span class="title function_">forEach</span>(<span class="keyword">function</span> (<span class="params">item</span>) {</span><br><span class="line"> <span class="keyword">let</span> value = item.<span class="property">close</span> - item.<span class="property">close2</span></span><br><span class="line"> <span class="keyword">if</span> (!max || value > max) {</span><br><span class="line"> max = value</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">if</span> (!min || value < min) {</span><br><span class="line"> min = value</span><br><span class="line"> }</span><br><span class="line"> })</span><br><span class="line"> <span class="comment">// 返回指标最终数据（未选中的数据用空对象替换）</span></span><br><span class="line"> <span class="comment">// 必须返回和dataList一样条数的数据，否则title不会显示</span></span><br><span class="line"> <span class="keyword">return</span> allDatas.<span class="title function_">map</span>(<span class="function">(<span class="params">data, i</span>) =></span> {</span><br><span class="line"> <span class="keyword">let</span> item = {</span><br><span class="line"> }</span><br><span class="line"> selectedDatas.<span class="title function_">map</span>(<span class="function">(<span class="params">selected, j</span>) =></span> {</span><br><span class="line"> <span class="keyword">if</span> (data.<span class="property">timestamp</span> === selected.<span class="property">timestamp</span>) {</span><br><span class="line"> item.<span class="property">timestamp</span> = selected.<span class="property">timestamp</span></span><br><span class="line"> item.<span class="property">max</span> = max</span><br><span class="line"> item.<span class="property">min</span> = min</span><br><span class="line"> }</span><br><span class="line"> })</span><br><span class="line"> <span class="keyword">return</span> item</span><br><span class="line"> })</span><br><span class="line"> },</span><br><span class="line"> <span class="attr">render</span>: <span class="function">(<span class="params">{ ctx, dataSource, viewport, styles, xAxis, yAxis }</span>) =></span> {</span><br><span class="line"> <span class="keyword">if</span> (dataSource.<span class="property">technicalIndicatorDataList</span>.<span class="property">length</span> <= <span class="number">0</span>) { <span class="comment">// 无指标数据则不处理</span></span><br><span class="line"> <span class="keyword">return</span></span><br><span class="line"> }</span><br><span class="line"> <span class="comment">// X轴起始像素</span></span><br><span class="line"> <span class="keyword">let</span> x = xAxis.<span class="title function_">convertToPixel</span>(<span class="number">0</span>)</span><br><span class="line"> <span class="comment">// 标记选中数据的起止位置</span></span><br><span class="line"> <span class="keyword">let</span> start</span><br><span class="line"> <span class="keyword">let</span> end = dataSource.<span class="property">technicalIndicatorDataList</span>.<span class="property">length</span> - <span class="number">1</span></span><br><span class="line"> dataSource.<span class="property">technicalIndicatorDataList</span>.<span class="title function_">forEach</span>(<span class="keyword">function</span> (<span class="params">kLineData, i</span>) {</span><br><span class="line"> <span class="keyword">if</span> (kLineData.<span class="property">timestamp</span>) {</span><br><span class="line"> <span class="keyword">if</span> (!start) {</span><br><span class="line"> start = i</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">if</span> (i < end && !dataSource.<span class="property">technicalIndicatorDataList</span>[i + <span class="number">1</span>].<span class="property">timestamp</span>) {</span><br><span class="line"> end = i</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">let</span> max = kLineData.<span class="property">max</span></span><br><span class="line"> <span class="keyword">let</span> min = kLineData.<span class="property">min</span></span><br><span class="line"> ctx.<span class="property">fillStyle</span> = <span class="string">'#fff'</span></span><br><span class="line"> ctx.<span class="property">textBaseline</span> = <span class="string">'middle'</span></span><br><span class="line"> ctx.<span class="property">textAlign</span> = <span class="string">'center'</span></span><br><span class="line"> <span class="comment">// 画箱体</span></span><br><span class="line"> <span class="comment">// 箱体颜色</span></span><br><span class="line"> ctx.<span class="property">strokeStyle</span> = <span class="string">'#DC143C'</span></span><br><span class="line"> <span class="comment">// y轴最高点位置</span></span><br><span class="line"> <span class="keyword">let</span> yHigh = yAxis.<span class="title function_">convertToPixel</span>(max)</span><br><span class="line"> <span class="comment">// y轴最低点位置</span></span><br><span class="line"> <span class="keyword">let</span> yLow = yAxis.<span class="title function_">convertToPixel</span>(min)</span><br><span class="line"> ctx.<span class="title function_">beginPath</span>()</span><br><span class="line"> <span class="comment">// 画笔移动到数据的x轴起始点，y轴最高点</span></span><br><span class="line"> ctx.<span class="title function_">moveTo</span>(x, yHigh)</span><br><span class="line"> <span class="keyword">if</span> (i === start) { <span class="comment">// 如果是第一条数据则需要画一条竖线</span></span><br><span class="line"> ctx.<span class="title function_">lineTo</span>(x, yLow) <span class="comment">// 画竖线</span></span><br><span class="line"> ctx.<span class="title function_">moveTo</span>(x, yHigh) <span class="comment">// 画笔移回</span></span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">if</span> (i === end) { <span class="comment">// 如果是最后一条数据则需要画一条竖线</span></span><br><span class="line"> ctx.<span class="title function_">lineTo</span>(x, yLow) <span class="comment">// 画竖线</span></span><br><span class="line"> ctx.<span class="title function_">fillText</span>(max, x + viewport.<span class="property">dataSpace</span>, yHigh) <span class="comment">// 标识箱体最高点的值</span></span><br><span class="line"> ctx.<span class="title function_">moveTo</span>(x, yLow) <span class="comment">// 画笔移动到Y轴最低点</span></span><br><span class="line"> ctx.<span class="title function_">fillText</span>(min, x + viewport.<span class="property">dataSpace</span>, yLow) <span class="comment">// 标识箱体最低点的值</span></span><br><span class="line"> } <span class="keyword">else</span> { <span class="comment">// 画两条横线，一条在y轴最高点，一条在y轴最低点</span></span><br><span class="line"> ctx.<span class="title function_">lineTo</span>(x + viewport.<span class="property">dataSpace</span>, yHigh) <span class="comment">// y轴最高点横线</span></span><br><span class="line"> ctx.<span class="title function_">moveTo</span>(x, yLow) <span class="comment">// 画笔移动到y轴最低点</span></span><br><span class="line"> ctx.<span class="title function_">lineTo</span>(x + viewport.<span class="property">dataSpace</span>, yLow) <span class="comment">// y轴最低点横线</span></span><br><span class="line"> }</span><br><span class="line"> ctx.<span class="title function_">stroke</span>()</span><br><span class="line"> ctx.<span class="title function_">closePath</span>()</span><br><span class="line"> <span class="comment">// 画黄金线</span></span><br><span class="line"> <span class="comment">// 黄金线颜色</span></span><br><span class="line"> ctx.<span class="property">strokeStyle</span> = <span class="string">'#ffffff'</span></span><br><span class="line"> <span class="comment">// 根据黄金线参数计算黄金线的值</span></span><br><span class="line"> <span class="keyword">let</span> goldenSectionLineA = (max - min) * goldenSectionA + min</span><br><span class="line"> <span class="keyword">let</span> goldenSectionLineB = (max - min) * goldenSectionB + min</span><br><span class="line"> <span class="keyword">let</span> goldenSectionLineC = (max - min) * goldenSectionC + min</span><br><span class="line"> <span class="keyword">let</span> goldenSectionLineD = (max - min) * goldenSectionD + min</span><br><span class="line"> <span class="keyword">let</span> goldenSectionLineE = (max - min) * goldenSectionE + min</span><br><span class="line"> <span class="comment">// 根据黄金线的值获取Y轴高度</span></span><br><span class="line"> <span class="keyword">let</span> yA = yAxis.<span class="title function_">convertToPixel</span>(goldenSectionLineA)</span><br><span class="line"> <span class="keyword">let</span> yB = yAxis.<span class="title function_">convertToPixel</span>(goldenSectionLineB)</span><br><span class="line"> <span class="keyword">let</span> yC = yAxis.<span class="title function_">convertToPixel</span>(goldenSectionLineC)</span><br><span class="line"> <span class="keyword">let</span> yD = yAxis.<span class="title function_">convertToPixel</span>(goldenSectionLineD)</span><br><span class="line"> <span class="keyword">let</span> yE = yAxis.<span class="title function_">convertToPixel</span>(goldenSectionLineE)</span><br><span class="line"> ctx.<span class="title function_">beginPath</span>()</span><br><span class="line"> <span class="comment">// 画第一条黄金线</span></span><br><span class="line"> ctx.<span class="title function_">moveTo</span>(x, yA)</span><br><span class="line"> ctx.<span class="title function_">lineTo</span>(x + viewport.<span class="property">barSpace</span> / <span class="number">2</span>, yA)</span><br><span class="line"> <span class="keyword">if</span> (i === end) { <span class="comment">// 是否最后一条数据，如果是则需要标识黄金线的值</span></span><br><span class="line"> <span class="comment">// 标识第一条黄金线的值</span></span><br><span class="line"> ctx.<span class="title function_">fillText</span>(goldenSectionLineA.<span class="title function_">toFixed</span>(<span class="number">2</span>), x + viewport.<span class="property">dataSpace</span>, yA)</span><br><span class="line"> }</span><br><span class="line"> <span class="comment">// 画第二条黄金线</span></span><br><span class="line"> ctx.<span class="title function_">moveTo</span>(x, yB)</span><br><span class="line"> ctx.<span class="title function_">lineTo</span>(x + viewport.<span class="property">barSpace</span> / <span class="number">2</span>, yB)</span><br><span class="line"> <span class="keyword">if</span> (i === end) {</span><br><span class="line"> ctx.<span class="title function_">fillText</span>(goldenSectionLineB.<span class="title function_">toFixed</span>(<span class="number">2</span>), x + viewport.<span class="property">dataSpace</span>, yB)</span><br><span class="line"> }</span><br><span class="line"> <span class="comment">// 画第三条黄金线</span></span><br><span class="line"> ctx.<span class="title function_">moveTo</span>(x, yC)</span><br><span class="line"> ctx.<span class="title function_">lineTo</span>(x + viewport.<span class="property">barSpace</span> / <span class="number">2</span>, yC)</span><br><span class="line"> <span class="keyword">if</span> (i === end) {</span><br><span class="line"> ctx.<span class="title function_">fillText</span>(goldenSectionLineC.<span class="title function_">toFixed</span>(<span class="number">2</span>), x + viewport.<span class="property">dataSpace</span>, yC)</span><br><span class="line"> }</span><br><span class="line"> <span class="comment">// 画第四条黄金线</span></span><br><span class="line"> ctx.<span class="title function_">moveTo</span>(x, yD)</span><br><span class="line"> ctx.<span class="title function_">lineTo</span>(x + viewport.<span class="property">barSpace</span> / <span class="number">2</span>, yD)</span><br><span class="line"> <span class="keyword">if</span> (i === end) {</span><br><span class="line"> ctx.<span class="title function_">fillText</span>(goldenSectionLineD.<span class="title function_">toFixed</span>(<span class="number">2</span>), x + viewport.<span class="property">dataSpace</span>, yD)</span><br><span class="line"> }</span><br><span class="line"> <span class="comment">// 画第五条黄金线</span></span><br><span class="line"> ctx.<span class="title function_">moveTo</span>(x, yE)</span><br><span class="line"> ctx.<span class="title function_">lineTo</span>(x + viewport.<span class="property">barSpace</span> / <span class="number">2</span>, yE)</span><br><span class="line"> <span class="keyword">if</span> (i === end) {</span><br><span class="line"> ctx.<span class="title function_">fillText</span>(goldenSectionLineE.<span class="title function_">toFixed</span>(<span class="number">2</span>), x + viewport.<span class="property">dataSpace</span>, yE)</span><br><span class="line"> }</span><br><span class="line"> ctx.<span class="title function_">stroke</span>()</span><br><span class="line"> ctx.<span class="title function_">closePath</span>()</span><br><span class="line"> }</span><br><span class="line"> <span class="comment">// 计算X轴的下一个位置</span></span><br><span class="line"> x += viewport.<span class="property">dataSpace</span></span><br><span class="line"> })</span><br><span class="line"> }</span><br><span class="line">})</span><br></pre></td></tr></table></figure><p></p><h4 id="结语"><a class="anchor" href="#结语">#</a> 结语</h4><div class="note info"><p>以上代码只是箱体的指标模版，还需要根据业务逻辑在标记上实现点击事件，然后通过事件动态添加移除箱体指标。</p></div><div class="tags"><a href="/tags/KLineChart/" rel="tag"><i class="ic i-tag"></i> KLineChart</a> <a href="/tags/K%E7%BA%BF/" rel="tag"><i class="ic i-tag"></i> K线</a> <a href="/tags/%E8%87%AA%E5%AE%9A%E4%B9%89%E6%8C%87%E6%A0%87/" rel="tag"><i class="ic i-tag"></i> 自定义指标</a></div></div><footer><div class="meta"><span class="item"><span class="icon"><i class="ic i-calendar-check"></i> </span><span class="text">更新于</span> <time title="修改时间：2023-04-22 21:42:27" itemprop="dateModified" datetime="2023-04-22T21:42:27+08:00">2023-04-22</time> </span><span id="2022/12/02/KLineChart实现自定义指标画图/" class="item leancloud_visitors" data-flag-title="KLineChart 实现自定义指标画图" title="阅读次数"><span class="icon"><i class="ic i-eye"></i> </span><span class="text">阅读次数</span> <span class="leancloud-visitors-count"></span> <span class="text">次</span></span></div><div class="reward"><button><i class="ic i-heartbeat"></i> 赞赏</button><p>请我喝[茶]~(￣▽￣)~*</p><div id="qr"><div><img data-src="/images/wechatpay.png" alt="Hito Li 微信支付"><p>微信支付</p></div><div><img data-src="/images/alipay.png" alt="Hito Li 支付宝"><p>支付宝</p></div></div></div><div id="copyright"><ul><li class="author"><strong>本文作者： </strong>Hito Li <i class="ic i-at"><em>@</em></i>涛声依旧</li><li class="link"><strong>本文链接：</strong> <a href="https://hitoli.com/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 实现自定义指标画图">https://hitoli.com/2022/12/02/KLineChart实现自定义指标画图/</a></li><li class="license"><strong>版权声明： </strong>本站所有文章除特别声明外，均采用 <span class="exturl" data-url="aHR0cHM6Ly9jcmVhdGl2ZWNvbW1vbnMub3JnL2xpY2Vuc2VzL2J5LW5jLXNhLzQuMC9kZWVkLnpo"><i class="ic i-creative-commons"><em>(CC)</em></i>BY-NC-SA</span> 许可协议。转载请注明出处！</li></ul></div></footer></article></div><div class="post-nav"><div class="item left"><a href="/2022/11/30/%E5%B0%86nginx%E6%9B%BF%E6%8D%A2%E4%B8%BAtengine/" itemprop="url" rel="prev" data-background-image="https://nas.hitoli.com:18014/images/2022/10/29/6833939bly1gicli3sbvtj20zk0m8x6p.jpg" title="将nginx替换为tengine"><span class="type">上一篇</span> <span class="category"><i class="ic i-flag"></i> Nginx</span><h3>将nginx替换为tengine</h3></a></div><div class="item right"><a href="/2022/12/05/Win10%E5%BD%BB%E5%BA%95%E5%85%B3%E9%97%ADwsappx%E8%BF%9B%E7%A8%8B/" itemprop="url" rel="next" data-background-image="https://nas.hitoli.com:18014/images/2022/10/29/6833939bly1giclhpw3lwj20zk0m8gvw.jpg" title="Win10彻底关闭wsappx进程"><span class="type">下一篇</span> <span class="category"><i class="ic i-flag"></i> Windows</span><h3>Win10彻底关闭wsappx进程</h3></a></div></div><div class="wrap" id="comments"></div></div><div id="sidebar"><div class="inner"><div class="panels"><div class="inner"><div class="contents panel pjax" data-title="文章目录"><ol class="toc"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%BC%95%E8%A8%80"><span class="toc-number">1.</span> <span class="toc-text">引言</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E6%A8%A1%E7%89%88%E4%BB%A3%E7%A0%81"><span class="toc-number">2.</span> <span class="toc-text">模版代码</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E7%BB%93%E8%AF%AD"><span class="toc-number">3.</span> <span class="toc-text">结语</span></a></li></ol></div><div class="related panel pjax" data-title="系列文章"><ul><li><a href="/2022/11/24/KLineChart%E5%AE%9E%E7%8E%B0%E4%B8%80%E5%B9%85%E5%9B%BE%E4%B8%8A%E7%94%BB%E5%A4%9A%E4%B8%AA%E8%9C%A1%E7%83%9BK%E7%BA%BF/" rel="bookmark" title="KLineChart实现一幅图上画多个蜡烛K线">KLineChart实现一幅图上画多个蜡烛K线</a></li><li class="active"><a href="/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/" rel="bookmark" title="KLineChart实现自定义指标画图">KLineChart实现自定义指标画图</a></li><li><a href="/2023/01/31/KLineChart%E7%94%BB%E6%B3%A2%E6%AE%B5%E9%AB%98%E4%BD%8E%E4%BB%B7%E5%9B%BE/" rel="bookmark" title="KLineChart画波段高低价图">KLineChart画波段高低价图</a></li></ul></div><div class="overview panel" data-title="站点概览"><div class="author" itemprop="author" itemscope itemtype="http://schema.org/Person"><img class="image" itemprop="image" alt="Hito Li" data-src="/images/avatar.jpg"><p class="name" itemprop="name">Hito Li</p><div class="description" itemprop="description">天生我材必有用</div></div><nav class="state"><div class="item posts"><a href="/archives/"><span class="count">62</span> <span class="name">文章</span></a></div><div class="item categories"><a href="/categories/"><span class="count">21</span> <span class="name">分类</span></a></div><div class="item tags"><a href="/tags/"><span class="count">105</span> <span class="name">标签</span></a></div></nav><div class="social"><span class="exturl item weibo" data-url="aHR0cHM6Ly93ZWliby5jb20vdS8xMDYxNDYwNzQ1" title="https://weibo.com/u/1061460745"><i class="ic i-weibo"></i></span> <span class="exturl item douban" data-url="aHR0cHM6Ly93d3cuZG91YmFuLmNvbS9wZW9wbGUvMjU5Mzc2NTY0" title="https://www.douban.com/people/259376564"><i class="ic i-douban"></i></span> <span class="exturl item music" data-url="aHR0cHM6Ly9tdXNpYy4xNjMuY29tLyMvdXNlci9ob21lP2lkPTEwNTQ2NzQ2Mw==" title="https://music.163.com/#/user/home?id=105467463"><i class="ic i-cloud-music"></i></span> <a href="/about/me" title="about/me" class="item about"><i class="ic i-address-card"></i></a></div><ul class="menu"><li class="item"><a href="/" rel="section"><i class="ic i-home"></i>首页</a></li><li class="item dropdown"><a href="javascript:void(0);"><i class="ic i-feather"></i>文章</a><ul class="submenu"><li class="item"><a href="/archives/" rel="section"><i class="ic i-list-alt"></i>归档</a></li><li class="item"><a href="/categories/" rel="section"><i class="ic i-th"></i>分类</a></li><li class="item"><a href="/tags/" rel="section"><i class="ic i-tags"></i>标签</a></li></ul></li><li class="item"><a href="/tools/" rel="section"><i class="ic i-magic"></i>工具</a></li><li class="item"><span class="exturl" data-url="aHR0cHM6Ly93d3cuZm9yZXZlcmJsb2cuY24vZ28uaHRtbA=="><i class="ic i-paper-plane"></i>虫洞</span></li><li class="item"><a href="/about/me" rel="section"><i class="ic i-user"></i>关于</a></li></ul></div></div></div><ul id="quick"><li class="prev pjax"><a href="/2022/11/30/%E5%B0%86nginx%E6%9B%BF%E6%8D%A2%E4%B8%BAtengine/" rel="prev" title="上一篇"><i class="ic i-chevron-left"></i></a></li><li class="up"><i class="ic i-arrow-up"></i></li><li class="down"><i class="ic i-arrow-down"></i></li><li class="next pjax"><a href="/2022/12/05/Win10%E5%BD%BB%E5%BA%95%E5%85%B3%E9%97%ADwsappx%E8%BF%9B%E7%A8%8B/" rel="next" title="下一篇"><i class="ic i-chevron-right"></i></a></li><li class="percent"></li></ul></div></div><div class="dimmer"></div></div></main><footer id="footer"><div class="inner"><div class="widgets"><div class="rpost pjax"><h2>随机文章</h2><ul><li class="item"><div class="breadcrumb"><a href="/categories/Linux/" title="分类于 Linux">Linux</a> <i class="ic i-angle-right"></i> <a href="/categories/Linux/%E6%9C%8D%E5%8A%A1/" title="分类于 服务">服务</a> <i class="ic i-angle-right"></i> <a href="/categories/Linux/%E6%9C%8D%E5%8A%A1/Nginx/" title="分类于 Nginx">Nginx</a></div><span><a href="/2022/09/27/nginx%E8%B4%9F%E8%BD%BD%E5%9D%87%E8%A1%A1%E9%85%8D%E7%BD%AE/" title="nginx负载均衡配置">nginx负载均衡配置</a></span></li><li class="item"><div class="breadcrumb"><a href="/categories/Windows/" title="分类于 Windows">Windows</a> <i class="ic i-angle-right"></i> <a href="/categories/Windows/%E5%B7%A5%E5%85%B7/" title="分类于 工具">工具</a></div><span><a href="/2022/11/01/360%E7%8B%AC%E7%AB%8B%E7%89%88%E5%B0%8F%E5%B7%A5%E5%85%B7/" title="360独立版小工具">360独立版小工具</a></span></li><li class="item"><div class="breadcrumb"><a href="/categories/%E6%9E%81%E7%A9%BA%E9%97%B4/" title="分类于 极空间">极空间</a> <i class="ic i-angle-right"></i> <a href="/categories/%E6%9E%81%E7%A9%BA%E9%97%B4/Docker/" title="分类于 Docker">Docker</a> <i class="ic i-angle-right"></i> <a href="/categories/%E6%9E%81%E7%A9%BA%E9%97%B4/Docker/Hexo/" title="分类于 Hexo">Hexo</a></div><span><a href="/2022/09/14/Hexo%E5%AE%89%E8%A3%85%E6%91%B8%E7%B4%A2/" title="Hexo安装摸索">Hexo安装摸索</a></span></li><li class="item"><div class="breadcrumb"><a href="/categories/Windows/" title="分类于 Windows">Windows</a> <i class="ic i-angle-right"></i> <a href="/categories/Windows/%E5%B7%A5%E5%85%B7/" title="分类于 工具">工具</a></div><span><a href="/2024/03/03/Docker%E5%AE%B9%E5%99%A8%E7%AE%A1%E7%90%86%E5%B9%B3%E5%8F%B0-Portainer%E5%AE%89%E8%A3%85/" title="Docker容器管理平台-Portainer安装">Docker容器管理平台-Portainer安装</a></span></li><li class="item"><div class="breadcrumb"><a href="/categories/%E5%B7%A5%E4%BD%9C/" title="分类于 工作">工作</a> <i class="ic i-angle-right"></i> <a href="/categories/%E5%B7%A5%E4%BD%9C/%E8%A7%A3%E5%86%B3%E9%97%AE%E9%A2%98/" title="分类于 解决问题">解决问题</a></div><span><a href="/2023/05/25/MySQL%E4%B8%AD%E7%9A%84any-value-%E5%87%BD%E6%95%B0/" title="MySQL中的any_value()函数">MySQL中的any_value()函数</a></span></li><li class="item"><div class="breadcrumb"><a href="/categories/Windows/" title="分类于 Windows">Windows</a> <i class="ic i-angle-right"></i> <a href="/categories/Windows/%E5%B7%A5%E5%85%B7/" title="分类于 工具">工具</a></div><span><a href="/2022/10/12/%E4%BD%BF%E7%94%A8picgo%E4%B8%8A%E4%BC%A0%E5%9B%BE%E7%89%87%E5%88%B0chevereto/" title="使用PicGo上传图片到chevereto">使用PicGo上传图片到chevereto</a></span></li><li class="item"><div class="breadcrumb"><a href="/categories/%E5%B7%A5%E4%BD%9C/" title="分类于 工作">工作</a> <i class="ic i-angle-right"></i> <a href="/categories/%E5%B7%A5%E4%BD%9C/%E8%A7%A3%E5%86%B3%E9%97%AE%E9%A2%98/" title="分类于 解决问题">解决问题</a></div><span><a href="/2024/05/22/%E5%AF%B9XML%E6%A0%BC%E5%BC%8F%E7%9A%84Word%E6%A8%A1%E6%9D%BF%E6%A0%BC%E5%BC%8F%E5%8C%96%E5%A4%84%E7%90%86/" title="对XML格式的Word模板格式化处理">对XML格式的Word模板格式化处理</a></span></li><li class="item"><div class="breadcrumb"><a href="/categories/Windows/" title="分类于 Windows">Windows</a> <i class="ic i-angle-right"></i> <a href="/categories/Windows/%E5%B7%A5%E5%85%B7/" title="分类于 工具">工具</a></div><span><a href="/2023/12/24/Docker-desktop%E9%83%A8%E7%BD%B2nacos/" title="Docker desktop部署nacos">Docker desktop部署nacos</a></span></li><li class="item"><div class="breadcrumb"><a href="/categories/%E5%B7%A5%E4%BD%9C/" title="分类于 工作">工作</a> <i class="ic i-angle-right"></i> <a href="/categories/%E5%B7%A5%E4%BD%9C/KLineChart/" title="分类于 KLineChart">KLineChart</a></div><span><a href="/2022/11/24/KLineChart%E5%AE%9E%E7%8E%B0%E4%B8%80%E5%B9%85%E5%9B%BE%E4%B8%8A%E7%94%BB%E5%A4%9A%E4%B8%AA%E8%9C%A1%E7%83%9BK%E7%BA%BF/" title="KLineChart实现一幅图上画多个蜡烛K线">KLineChart实现一幅图上画多个蜡烛K线</a></span></li><li class="item"><div class="breadcrumb"><a href="/categories/%E6%9E%81%E7%A9%BA%E9%97%B4/" title="分类于 极空间">极空间</a> <i class="ic i-angle-right"></i> <a href="/categories/%E6%9E%81%E7%A9%BA%E9%97%B4/Docker/" title="分类于 Docker">Docker</a> <i class="ic i-angle-right"></i> <a href="/categories/%E6%9E%81%E7%A9%BA%E9%97%B4/Docker/Hexo/" title="分类于 Hexo">Hexo</a></div><span><a href="/2022/09/26/%E8%A7%A3%E5%86%B3Hexo-Shoka%E8%83%8C%E6%99%AF%E9%9F%B3%E4%B9%90%E6%97%A0%E6%B3%95%E6%92%AD%E6%94%BE%E7%9A%84%E9%97%AE%E9%A2%98/" title="解决Hexo+Shoka背景音乐无法播放的问题">解决Hexo+Shoka背景音乐无法播放的问题</a></span></li></ul></div><div><h2>最新评论</h2><ul class="leancloud-recent-comment"></ul></div></div><div class="status"><div class="copyright">© 2010 – <span itemprop="copyrightYear">2024</span> <span class="with-love"><i class="ic i-sakura rotate"></i> </span><span class="author" itemprop="copyrightHolder">Hito Li @ ☆∵∴Hito∴∵★</span></div><div class="count"><span class="post-meta-item-icon"><i class="ic i-chart-area"></i> </span><span title="站点总字数">148k 字</span> <span class="post-meta-divider">|</span> <span class="post-meta-item-icon"><i class="ic i-coffee"></i> </span><span title="站点阅读时长">2:15</span></div><div class="powered-by">基于 <span class="exturl" data-url="aHR0cHM6Ly9oZXhvLmlv">Hexo</span> & Theme.<span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL2FtZWhpbWUvaGV4by10aGVtZS1zaG9rYQ==">Shoka</span></div></div></div></footer></div><script data-config type="text/javascript">var LOCAL={path:"2022/12/02/KLineChart实现自定义指标画图/",favicon:{show:"（●´3‘●）哎呀呀",hide:"(´Д｀)真糟糕！"},search:{placeholder:"文章搜索",empty:"关于 「 ${query} 」，什么也没搜到",stats:"${time} ms 内找到 ${hits} 条结果"},valine:!0,fancybox:!0,copyright:'复制成功，转载请遵守 <i class="ic i-creative-commons"></i>BY-NC-SA 协议。',ignores:[function(e){return e.includes("#")},function(e){return new RegExp(LOCAL.path+"$").test(e)}]}</script><script src="https://nas.hitoli.com:18003/assets/polyfill.js"></script><script src="https://nas.hitoli.com:18003/assets/pace.min.js"></script><script src="https://nas.hitoli.com:18003/assets/pjax.min.js"></script><script src="https://nas.hitoli.com:18003/assets/fetch.umd.js"></script><script src="https://nas.hitoli.com:18003/assets/anime.min.js"></script><script src="https://nas.hitoli.com:18003/assets/algoliasearch-lite.umd.min.js"></script><script src="https://nas.hitoli.com:18003/assets/instantsearch.production.min.js"></script><script src="https://nas.hitoli.com:18003/assets/lozad.min.js"></script><script src="https://nas.hitoli.com:18003/assets/quicklink.umd.min.js"></script><script src="https://nas.hitoli.com:18003/assets/jquery.min.js,jquery.fancybox.min.js,jquery.justifiedGallery.min.js" async></script><script src="https://nas.hitoli.com:18003/assets/MiniValine.min.js"></script><script src="https://nas.hitoli.com:18003/assets/MiniValine.visitor.min.js"></script><script src="https://nas.hitoli.com:18003/assets/copy-tex.min.js" async></script><script src="https://nas.hitoli.com:18003/assets/frappe-charts.min.iife.js"></script><script src="https://nas.hitoli.com:18003/assets/av-min.js"></script><script src="https://nas.hitoli.com:18003/assets/autosize.min.js,xss.min.js,ua-parser.min.js,tex-svg.js,marked.min.js"></script><script src="/js/app.js?v=0.0.0"></script></body></html> |