lht/blog
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
blog/2022/12/02/KLineChart实现自定义指标画图/index.html
qinglong 154387fe52 Site updated: 2023-01-14 09:25:09
2023-01-14 09:25:11 +08:00

1 line
64 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!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://blog.jingxiyuan.cn/rss.xml"><link rel="alternate" type="application/atom+xml" title="涛声依旧" href="https://blog.jingxiyuan.cn/atom.xml"><link rel="alternate" type="application/json" title="涛声依旧" href="https://blog.jingxiyuan.cn/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://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 实现自定义指标画图 - KLineChart - 解决问题 - 工作 | ☆∵∴Hito∴∵★ = 涛声依旧 = 天下事有难易乎？为之，则难者亦易矣</title><meta name="generator" content="Hexo 6.3.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.4k</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/6833939bly1gipewkhf1zj20zk0m81kx.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/6833939bly1gicliierfjj20zk0m8npd.jpg"></li><li class="item" data-background-image="https://nas.hitoli.com:18014/images/2022/10/29/6833939bly1gipex2cdtbj20zk0m8x6p.jpg"></li><li class="item" data-background-image="https://nas.hitoli.com:18014/images/2022/10/29/6833939bly1giciub8ja1j20zk0m81ky.jpg"></li><li class="item" data-background-image="https://nas.hitoli.com:18014/images/2022/10/29/6833939bly1gipewf5l51j20zk0m8b29.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 itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem"><a href="/categories/%E5%B7%A5%E4%BD%9C/%E8%A7%A3%E5%86%B3%E9%97%AE%E9%A2%98/" itemprop="item" rel="index" title="分类于 解决问题"><span itemprop="name">解决问题</span></a><meta itemprop="position" content="2"></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/%E8%A7%A3%E5%86%B3%E9%97%AE%E9%A2%98/KLineChart/" itemprop="item" rel="index" title="分类于 KLineChart"><span itemprop="name">KLineChart</span></a><meta itemprop="position" content="3"></span></div><article itemscope itemtype="http://schema.org/Article" class="post block" lang="zh-CN"><link itemprop="mainEntityOfPage" href="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/"><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://image.hitoli.com/images/2022/12/02/7fd440be0502d0099427e7c74c4ebf29.jpg" alt="7fd440be0502d0099427e7c74c4ebf29.jpg"></p><h4 id="模版代码"><a class="anchor" href="#模版代码">#</a> 模版代码</h4><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> <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="token punctuation">,</span> goldenSectionE<span class="token punctuation">]</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="18"></td><td><pre> <span class="token function-variable function">calcTechnicalIndicator</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">dataList<span class="token punctuation">,</span> <span class="token punctuation">&#123;</span> params<span class="token punctuation">,</span> plots <span class="token punctuation">&#125;</span></span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">&#123;</span></pre></td></tr><tr><td data-num="19"></td><td><pre> <span class="token keyword">let</span> allDatas <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span> <span class="token comment">// 所有数据</span></pre></td></tr><tr><td data-num="20"></td><td><pre> <span class="token keyword">let</span> selectedDatas <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span> <span class="token comment">// 选中的数据</span></pre></td></tr><tr><td data-num="21"></td><td><pre> <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> dataList<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span></pre></td></tr><tr><td data-num="22"></td><td><pre> <span class="token keyword">let</span> kLineData <span class="token operator">=</span> dataList<span class="token punctuation">[</span>i<span class="token punctuation">]</span></pre></td></tr><tr><td data-num="23"></td><td><pre> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token function">dateConvert</span><span class="token punctuation">(</span>kLineData<span class="token punctuation">.</span>timestamp<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">getTime</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">===</span> <span class="token function">getGlobalObject</span><span class="token punctuation">(</span><span class="token string">'boxId'</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span></pre></td></tr><tr><td data-num="24"></td><td><pre> <span class="token keyword">const</span> size <span class="token operator">=</span> params<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span></pre></td></tr><tr><td data-num="25"></td><td><pre> <span class="token comment">// 找出当前数据往前的 size 条数据（包含自己）</span></pre></td></tr><tr><td data-num="26"></td><td><pre> <span class="token keyword">let</span> startData <span class="token operator">=</span> i <span class="token operator">-</span> size <span class="token operator">+</span> <span class="token number">1</span></pre></td></tr><tr><td data-num="27"></td><td><pre> <span class="token keyword">if</span> <span class="token punctuation">(</span>startData <span class="token operator">&lt;</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span></pre></td></tr><tr><td data-num="28"></td><td><pre> startData <span class="token operator">=</span> <span class="token number">0</span></pre></td></tr><tr><td data-num="29"></td><td><pre> <span class="token punctuation">&#125;</span></pre></td></tr><tr><td data-num="30"></td><td><pre> <span class="token keyword">let</span> endData <span class="token operator">=</span> i <span class="token operator">+</span> <span class="token number">1</span></pre></td></tr><tr><td data-num="31"></td><td><pre> <span class="token keyword">if</span> <span class="token punctuation">(</span>endData <span class="token operator">></span> dataList<span class="token punctuation">.</span>length<span class="token punctuation">)</span> <span class="token punctuation">&#123;</span></pre></td></tr><tr><td data-num="32"></td><td><pre> endData <span class="token operator">=</span> dataList<span class="token punctuation">.</span>length</pre></td></tr><tr><td data-num="33"></td><td><pre> <span class="token punctuation">&#125;</span></pre></td></tr><tr><td data-num="34"></td><td><pre> selectedDatas <span class="token operator">=</span> dataList<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</span>startData<span class="token punctuation">,</span> endData<span class="token punctuation">)</span></pre></td></tr><tr><td data-num="35"></td><td><pre> <span class="token punctuation">&#125;</span></pre></td></tr><tr><td data-num="36"></td><td><pre> allDatas<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">&#123;</span></pre></td></tr><tr><td data-num="37"></td><td><pre> <span class="token literal-property property">timestamp</span><span class="token operator">:</span> kLineData<span class="token punctuation">.</span>timestamp</pre></td></tr><tr><td data-num="38"></td><td><pre> <span class="token punctuation">&#125;</span><span class="token punctuation">)</span></pre></td></tr><tr><td data-num="39"></td><td><pre> <span class="token punctuation">&#125;</span></pre></td></tr><tr><td data-num="40"></td><td><pre> <span class="token comment">// 找出选中数据中最高最低差价</span></pre></td></tr><tr><td data-num="41"></td><td><pre> <span class="token keyword">let</span> max<span class="token punctuation">,</span> min</pre></td></tr><tr><td data-num="42"></td><td><pre> selectedDatas<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">item</span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span></pre></td></tr><tr><td data-num="43"></td><td><pre> <span class="token keyword">let</span> value <span class="token operator">=</span> item<span class="token punctuation">.</span>close <span class="token operator">-</span> item<span class="token punctuation">.</span>close2</pre></td></tr><tr><td data-num="44"></td><td><pre> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>max <span class="token operator">||</span> value <span class="token operator">></span> max<span class="token punctuation">)</span> <span class="token punctuation">&#123;</span></pre></td></tr><tr><td data-num="45"></td><td><pre> max <span class="token operator">=</span> value</pre></td></tr><tr><td data-num="46"></td><td><pre> <span class="token punctuation">&#125;</span></pre></td></tr><tr><td data-num="47"></td><td><pre> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>min <span class="token operator">||</span> value <span class="token operator">&lt;</span> min<span class="token punctuation">)</span> <span class="token punctuation">&#123;</span></pre></td></tr><tr><td data-num="48"></td><td><pre> min <span class="token operator">=</span> value</pre></td></tr><tr><td data-num="49"></td><td><pre> <span class="token punctuation">&#125;</span></pre></td></tr><tr><td data-num="50"></td><td><pre> <span class="token punctuation">&#125;</span><span class="token punctuation">)</span></pre></td></tr><tr><td data-num="51"></td><td><pre> <span class="token comment">// 返回指标最终数据（未选中的数据用空对象替换）</span></pre></td></tr><tr><td data-num="52"></td><td><pre> <span class="token comment">// 必须返回和 dataList 一样条数的数据，否则 title 不会显示</span></pre></td></tr><tr><td data-num="53"></td><td><pre> <span class="token keyword">return</span> allDatas<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">data<span class="token punctuation">,</span> i</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">&#123;</span></pre></td></tr><tr><td data-num="54"></td><td><pre> <span class="token keyword">let</span> item <span class="token operator">=</span> <span class="token punctuation">&#123;</span></pre></td></tr><tr><td data-num="55"></td><td><pre> <span class="token punctuation">&#125;</span></pre></td></tr><tr><td data-num="56"></td><td><pre> selectedDatas<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">selected<span class="token punctuation">,</span> j</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">&#123;</span></pre></td></tr><tr><td data-num="57"></td><td><pre> <span class="token keyword">if</span> <span class="token punctuation">(</span>data<span class="token punctuation">.</span>timestamp <span class="token operator">===</span> selected<span class="token punctuation">.</span>timestamp<span class="token punctuation">)</span> <span class="token punctuation">&#123;</span></pre></td></tr><tr><td data-num="58"></td><td><pre> item<span class="token punctuation">.</span>timestamp <span class="token operator">=</span> selected<span class="token punctuation">.</span>timestamp</pre></td></tr><tr><td data-num="59"></td><td><pre> item<span class="token punctuation">.</span>max <span class="token operator">=</span> max</pre></td></tr><tr><td data-num="60"></td><td><pre> item<span class="token punctuation">.</span>min <span class="token operator">=</span> min</pre></td></tr><tr><td data-num="61"></td><td><pre> <span class="token punctuation">&#125;</span></pre></td></tr><tr><td data-num="62"></td><td><pre> <span class="token punctuation">&#125;</span><span class="token punctuation">)</span></pre></td></tr><tr><td data-num="63"></td><td><pre> <span class="token keyword">return</span> item</pre></td></tr><tr><td data-num="64"></td><td><pre> <span class="token punctuation">&#125;</span><span class="token punctuation">)</span></pre></td></tr><tr><td data-num="65"></td><td><pre> <span class="token punctuation">&#125;</span><span class="token punctuation">,</span></pre></td></tr><tr><td data-num="66"></td><td><pre> <span class="token function-variable function">render</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">&#123;</span> ctx<span class="token punctuation">,</span> dataSource<span class="token punctuation">,</span> viewport<span class="token punctuation">,</span> styles<span class="token punctuation">,</span> xAxis<span class="token punctuation">,</span> yAxis <span class="token punctuation">&#125;</span></span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">&#123;</span></pre></td></tr><tr><td data-num="67"></td><td><pre> <span class="token keyword">if</span> <span class="token punctuation">(</span>dataSource<span class="token punctuation">.</span>technicalIndicatorDataList<span class="token punctuation">.</span>length <span class="token operator">&lt;=</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span> <span class="token comment">// 无指标数据则不处理</span></pre></td></tr><tr><td data-num="68"></td><td><pre> <span class="token keyword">return</span></pre></td></tr><tr><td data-num="69"></td><td><pre> <span class="token punctuation">&#125;</span></pre></td></tr><tr><td data-num="70"></td><td><pre> <span class="token comment">// X 轴起始像素</span></pre></td></tr><tr><td data-num="71"></td><td><pre> <span class="token keyword">let</span> x <span class="token operator">=</span> xAxis<span class="token punctuation">.</span><span class="token function">convertToPixel</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span></pre></td></tr><tr><td data-num="72"></td><td><pre> <span class="token comment">// 标记选中数据的起止位置</span></pre></td></tr><tr><td data-num="73"></td><td><pre> <span class="token keyword">let</span> start</pre></td></tr><tr><td data-num="74"></td><td><pre> <span class="token keyword">let</span> end <span class="token operator">=</span> dataSource<span class="token punctuation">.</span>technicalIndicatorDataList<span class="token punctuation">.</span>length <span class="token operator">-</span> <span class="token number">1</span></pre></td></tr><tr><td data-num="75"></td><td><pre> dataSource<span class="token punctuation">.</span>technicalIndicatorDataList<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">kLineData<span class="token punctuation">,</span> i</span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span></pre></td></tr><tr><td data-num="76"></td><td><pre> <span class="token keyword">if</span> <span class="token punctuation">(</span>kLineData<span class="token punctuation">.</span>timestamp<span class="token punctuation">)</span> <span class="token punctuation">&#123;</span></pre></td></tr><tr><td data-num="77"></td><td><pre> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>start<span class="token punctuation">)</span> <span class="token punctuation">&#123;</span></pre></td></tr><tr><td data-num="78"></td><td><pre> start <span class="token operator">=</span> i</pre></td></tr><tr><td data-num="79"></td><td><pre> <span class="token punctuation">&#125;</span></pre></td></tr><tr><td data-num="80"></td><td><pre> <span class="token keyword">if</span> <span class="token punctuation">(</span>i <span class="token operator">&lt;</span> end <span class="token operator">&amp;&amp;</span> <span class="token operator">!</span>dataSource<span class="token punctuation">.</span>technicalIndicatorDataList<span class="token punctuation">[</span>i <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">.</span>timestamp<span class="token punctuation">)</span> <span class="token punctuation">&#123;</span></pre></td></tr><tr><td data-num="81"></td><td><pre> end <span class="token operator">=</span> i</pre></td></tr><tr><td data-num="82"></td><td><pre> <span class="token punctuation">&#125;</span></pre></td></tr><tr><td data-num="83"></td><td><pre> <span class="token keyword">let</span> max <span class="token operator">=</span> kLineData<span class="token punctuation">.</span>max</pre></td></tr><tr><td data-num="84"></td><td><pre> <span class="token keyword">let</span> min <span class="token operator">=</span> kLineData<span class="token punctuation">.</span>min</pre></td></tr><tr><td data-num="85"></td><td><pre> ctx<span class="token punctuation">.</span>fillStyle <span class="token operator">=</span> <span class="token string">'#fff'</span></pre></td></tr><tr><td data-num="86"></td><td><pre> ctx<span class="token punctuation">.</span>textBaseline <span class="token operator">=</span> <span class="token string">'middle'</span></pre></td></tr><tr><td data-num="87"></td><td><pre> ctx<span class="token punctuation">.</span>textAlign <span class="token operator">=</span> <span class="token string">'center'</span></pre></td></tr><tr><td data-num="88"></td><td><pre> <span class="token comment">// 画箱体</span></pre></td></tr><tr><td data-num="89"></td><td><pre> <span class="token comment">// 箱体颜色</span></pre></td></tr><tr><td data-num="90"></td><td><pre> ctx<span class="token punctuation">.</span>strokeStyle <span class="token operator">=</span> <span class="token string">'#DC143C'</span></pre></td></tr><tr><td data-num="91"></td><td><pre> <span class="token comment">//y 轴最高点位置</span></pre></td></tr><tr><td data-num="92"></td><td><pre> <span class="token keyword">let</span> yHigh <span class="token operator">=</span> yAxis<span class="token punctuation">.</span><span class="token function">convertToPixel</span><span class="token punctuation">(</span>max<span class="token punctuation">)</span></pre></td></tr><tr><td data-num="93"></td><td><pre> <span class="token comment">//y 轴最低点位置</span></pre></td></tr><tr><td data-num="94"></td><td><pre> <span class="token keyword">let</span> yLow <span class="token operator">=</span> yAxis<span class="token punctuation">.</span><span class="token function">convertToPixel</span><span class="token punctuation">(</span>min<span class="token punctuation">)</span></pre></td></tr><tr><td data-num="95"></td><td><pre> ctx<span class="token punctuation">.</span><span class="token function">beginPath</span><span class="token punctuation">(</span><span class="token punctuation">)</span></pre></td></tr><tr><td data-num="96"></td><td><pre> <span class="token comment">// 画笔移动到数据的 x 轴起始点，y 轴最高点</span></pre></td></tr><tr><td data-num="97"></td><td><pre> ctx<span class="token punctuation">.</span><span class="token function">moveTo</span><span class="token punctuation">(</span>x<span class="token punctuation">,</span> yHigh<span class="token punctuation">)</span></pre></td></tr><tr><td data-num="98"></td><td><pre> <span class="token keyword">if</span> <span class="token punctuation">(</span>i <span class="token operator">===</span> start<span class="token punctuation">)</span> <span class="token punctuation">&#123;</span> <span class="token comment">// 如果是第一条数据则需要画一条竖线</span></pre></td></tr><tr><td data-num="99"></td><td><pre> ctx<span class="token punctuation">.</span><span class="token function">lineTo</span><span class="token punctuation">(</span>x<span class="token punctuation">,</span> yLow<span class="token punctuation">)</span> <span class="token comment">// 画竖线</span></pre></td></tr><tr><td data-num="100"></td><td><pre> ctx<span class="token punctuation">.</span><span class="token function">moveTo</span><span class="token punctuation">(</span>x<span class="token punctuation">,</span> yHigh<span class="token punctuation">)</span> <span class="token comment">// 画笔移回</span></pre></td></tr><tr><td data-num="101"></td><td><pre> <span class="token punctuation">&#125;</span></pre></td></tr><tr><td data-num="102"></td><td><pre> <span class="token keyword">if</span> <span class="token punctuation">(</span>i <span class="token operator">===</span> end<span class="token punctuation">)</span> <span class="token punctuation">&#123;</span> <span class="token comment">// 如果是最后一条数据则需要画一条竖线</span></pre></td></tr><tr><td data-num="103"></td><td><pre> ctx<span class="token punctuation">.</span><span class="token function">lineTo</span><span class="token punctuation">(</span>x<span class="token punctuation">,</span> yLow<span class="token punctuation">)</span> <span class="token comment">// 画竖线</span></pre></td></tr><tr><td data-num="104"></td><td><pre> ctx<span class="token punctuation">.</span><span class="token function">fillText</span><span class="token punctuation">(</span>max<span class="token punctuation">,</span> x <span class="token operator">+</span> viewport<span class="token punctuation">.</span>dataSpace<span class="token punctuation">,</span> yHigh<span class="token punctuation">)</span> <span class="token comment">// 标识箱体最高点的值</span></pre></td></tr><tr><td data-num="105"></td><td><pre> ctx<span class="token punctuation">.</span><span class="token function">moveTo</span><span class="token punctuation">(</span>x<span class="token punctuation">,</span> yLow<span class="token punctuation">)</span> <span class="token comment">// 画笔移动到 Y 轴最低点</span></pre></td></tr><tr><td data-num="106"></td><td><pre> ctx<span class="token punctuation">.</span><span class="token function">fillText</span><span class="token punctuation">(</span>min<span class="token punctuation">,</span> x <span class="token operator">+</span> viewport<span class="token punctuation">.</span>dataSpace<span class="token punctuation">,</span> yLow<span class="token punctuation">)</span> <span class="token comment">// 标识箱体最低点的值</span></pre></td></tr><tr><td data-num="107"></td><td><pre> <span class="token punctuation">&#125;</span> <span class="token keyword">else</span> <span class="token punctuation">&#123;</span> <span class="token comment">// 画两条横线，一条在 y 轴最高点，一条在 y 轴最低点</span></pre></td></tr><tr><td data-num="108"></td><td><pre> ctx<span class="token punctuation">.</span><span class="token function">lineTo</span><span class="token punctuation">(</span>x <span class="token operator">+</span> viewport<span class="token punctuation">.</span>dataSpace<span class="token punctuation">,</span> yHigh<span class="token punctuation">)</span> <span class="token comment">//y 轴最高点横线</span></pre></td></tr><tr><td data-num="109"></td><td><pre> ctx<span class="token punctuation">.</span><span class="token function">moveTo</span><span class="token punctuation">(</span>x<span class="token punctuation">,</span> yLow<span class="token punctuation">)</span> <span class="token comment">// 画笔移动到 y 轴最低点</span></pre></td></tr><tr><td data-num="110"></td><td><pre> ctx<span class="token punctuation">.</span><span class="token function">lineTo</span><span class="token punctuation">(</span>x <span class="token operator">+</span> viewport<span class="token punctuation">.</span>dataSpace<span class="token punctuation">,</span> yLow<span class="token punctuation">)</span> <span class="token comment">//y 轴最低点横线</span></pre></td></tr><tr><td data-num="111"></td><td><pre> <span class="token punctuation">&#125;</span></pre></td></tr><tr><td data-num="112"></td><td><pre> ctx<span class="token punctuation">.</span><span class="token function">stroke</span><span class="token punctuation">(</span><span class="token punctuation">)</span></pre></td></tr><tr><td data-num="113"></td><td><pre> ctx<span class="token punctuation">.</span><span class="token function">closePath</span><span class="token punctuation">(</span><span class="token punctuation">)</span></pre></td></tr><tr><td data-num="114"></td><td><pre> <span class="token comment">// 画黄金线</span></pre></td></tr><tr><td data-num="115"></td><td><pre> <span class="token comment">// 黄金线颜色</span></pre></td></tr><tr><td data-num="116"></td><td><pre> ctx<span class="token punctuation">.</span>strokeStyle <span class="token operator">=</span> <span class="token string">'#ffffff'</span></pre></td></tr><tr><td data-num="117"></td><td><pre> <span class="token comment">// 根据黄金线参数计算黄金线的值</span></pre></td></tr><tr><td data-num="118"></td><td><pre> <span class="token keyword">let</span> goldenSectionLineA <span class="token operator">=</span> <span class="token punctuation">(</span>max <span class="token operator">-</span> min<span class="token punctuation">)</span> <span class="token operator">*</span> goldenSectionA <span class="token operator">+</span> min</pre></td></tr><tr><td data-num="119"></td><td><pre> <span class="token keyword">let</span> goldenSectionLineB <span class="token operator">=</span> <span class="token punctuation">(</span>max <span class="token operator">-</span> min<span class="token punctuation">)</span> <span class="token operator">*</span> goldenSectionB <span class="token operator">+</span> min</pre></td></tr><tr><td data-num="120"></td><td><pre> <span class="token keyword">let</span> goldenSectionLineC <span class="token operator">=</span> <span class="token punctuation">(</span>max <span class="token operator">-</span> min<span class="token punctuation">)</span> <span class="token operator">*</span> goldenSectionC <span class="token operator">+</span> min</pre></td></tr><tr><td data-num="121"></td><td><pre> <span class="token keyword">let</span> goldenSectionLineD <span class="token operator">=</span> <span class="token punctuation">(</span>max <span class="token operator">-</span> min<span class="token punctuation">)</span> <span class="token operator">*</span> goldenSectionD <span class="token operator">+</span> min</pre></td></tr><tr><td data-num="122"></td><td><pre> <span class="token keyword">let</span> goldenSectionLineE <span class="token operator">=</span> <span class="token punctuation">(</span>max <span class="token operator">-</span> min<span class="token punctuation">)</span> <span class="token operator">*</span> goldenSectionE <span class="token operator">+</span> min</pre></td></tr><tr><td data-num="123"></td><td><pre> <span class="token comment">// 根据黄金线的值获取 Y 轴高度</span></pre></td></tr><tr><td data-num="124"></td><td><pre> <span class="token keyword">let</span> yA <span class="token operator">=</span> yAxis<span class="token punctuation">.</span><span class="token function">convertToPixel</span><span class="token punctuation">(</span>goldenSectionLineA<span class="token punctuation">)</span></pre></td></tr><tr><td data-num="125"></td><td><pre> <span class="token keyword">let</span> yB <span class="token operator">=</span> yAxis<span class="token punctuation">.</span><span class="token function">convertToPixel</span><span class="token punctuation">(</span>goldenSectionLineB<span class="token punctuation">)</span></pre></td></tr><tr><td data-num="126"></td><td><pre> <span class="token keyword">let</span> yC <span class="token operator">=</span> yAxis<span class="token punctuation">.</span><span class="token function">convertToPixel</span><span class="token punctuation">(</span>goldenSectionLineC<span class="token punctuation">)</span></pre></td></tr><tr><td data-num="127"></td><td><pre> <span class="token keyword">let</span> yD <span class="token operator">=</span> yAxis<span class="token punctuation">.</span><span class="token function">convertToPixel</span><span class="token punctuation">(</span>goldenSectionLineD<span class="token punctuation">)</span></pre></td></tr><tr><td data-num="128"></td><td><pre> <span class="token keyword">let</span> yE <span class="token operator">=</span> yAxis<span class="token punctuation">.</span><span class="token function">convertToPixel</span><span class="token punctuation">(</span>goldenSectionLineE<span class="token punctuation">)</span></pre></td></tr><tr><td data-num="129"></td><td><pre> ctx<span class="token punctuation">.</span><span class="token function">beginPath</span><span class="token punctuation">(</span><span class="token punctuation">)</span></pre></td></tr><tr><td data-num="130"></td><td><pre> <span class="token comment">// 画第一条黄金线</span></pre></td></tr><tr><td data-num="131"></td><td><pre> ctx<span class="token punctuation">.</span><span class="token function">moveTo</span><span class="token punctuation">(</span>x<span class="token punctuation">,</span> yA<span class="token punctuation">)</span></pre></td></tr><tr><td data-num="132"></td><td><pre> ctx<span class="token punctuation">.</span><span class="token function">lineTo</span><span class="token punctuation">(</span>x <span class="token operator">+</span> viewport<span class="token punctuation">.</span>barSpace <span class="token operator">/</span> <span class="token number">2</span><span class="token punctuation">,</span> yA<span class="token punctuation">)</span></pre></td></tr><tr><td data-num="133"></td><td><pre> <span class="token keyword">if</span> <span class="token punctuation">(</span>i <span class="token operator">===</span> end<span class="token punctuation">)</span> <span class="token punctuation">&#123;</span> <span class="token comment">// 是否最后一条数据，如果是则需要标识黄金线的值</span></pre></td></tr><tr><td data-num="134"></td><td><pre> <span class="token comment">// 标识第一条黄金线的值</span></pre></td></tr><tr><td data-num="135"></td><td><pre> ctx<span class="token punctuation">.</span><span class="token function">fillText</span><span class="token punctuation">(</span>goldenSectionLineA<span class="token punctuation">.</span><span class="token function">toFixed</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">,</span> x <span class="token operator">+</span> viewport<span class="token punctuation">.</span>dataSpace<span class="token punctuation">,</span> yA<span class="token punctuation">)</span></pre></td></tr><tr><td data-num="136"></td><td><pre> <span class="token punctuation">&#125;</span></pre></td></tr><tr><td data-num="137"></td><td><pre> <span class="token comment">// 画第二条黄金线</span></pre></td></tr><tr><td data-num="138"></td><td><pre> ctx<span class="token punctuation">.</span><span class="token function">moveTo</span><span class="token punctuation">(</span>x<span class="token punctuation">,</span> yB<span class="token punctuation">)</span></pre></td></tr><tr><td data-num="139"></td><td><pre> ctx<span class="token punctuation">.</span><span class="token function">lineTo</span><span class="token punctuation">(</span>x <span class="token operator">+</span> viewport<span class="token punctuation">.</span>barSpace <span class="token operator">/</span> <span class="token number">2</span><span class="token punctuation">,</span> yB<span class="token punctuation">)</span></pre></td></tr><tr><td data-num="140"></td><td><pre> <span class="token keyword">if</span> <span class="token punctuation">(</span>i <span class="token operator">===</span> end<span class="token punctuation">)</span> <span class="token punctuation">&#123;</span></pre></td></tr><tr><td data-num="141"></td><td><pre> ctx<span class="token punctuation">.</span><span class="token function">fillText</span><span class="token punctuation">(</span>goldenSectionLineB<span class="token punctuation">.</span><span class="token function">toFixed</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">,</span> x <span class="token operator">+</span> viewport<span class="token punctuation">.</span>dataSpace<span class="token punctuation">,</span> yB<span class="token punctuation">)</span></pre></td></tr><tr><td data-num="142"></td><td><pre> <span class="token punctuation">&#125;</span></pre></td></tr><tr><td data-num="143"></td><td><pre> <span class="token comment">// 画第三条黄金线</span></pre></td></tr><tr><td data-num="144"></td><td><pre> ctx<span class="token punctuation">.</span><span class="token function">moveTo</span><span class="token punctuation">(</span>x<span class="token punctuation">,</span> yC<span class="token punctuation">)</span></pre></td></tr><tr><td data-num="145"></td><td><pre> ctx<span class="token punctuation">.</span><span class="token function">lineTo</span><span class="token punctuation">(</span>x <span class="token operator">+</span> viewport<span class="token punctuation">.</span>barSpace <span class="token operator">/</span> <span class="token number">2</span><span class="token punctuation">,</span> yC<span class="token punctuation">)</span></pre></td></tr><tr><td data-num="146"></td><td><pre> <span class="token keyword">if</span> <span class="token punctuation">(</span>i <span class="token operator">===</span> end<span class="token punctuation">)</span> <span class="token punctuation">&#123;</span></pre></td></tr><tr><td data-num="147"></td><td><pre> ctx<span class="token punctuation">.</span><span class="token function">fillText</span><span class="token punctuation">(</span>goldenSectionLineC<span class="token punctuation">.</span><span class="token function">toFixed</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">,</span> x <span class="token operator">+</span> viewport<span class="token punctuation">.</span>dataSpace<span class="token punctuation">,</span> yC<span class="token punctuation">)</span></pre></td></tr><tr><td data-num="148"></td><td><pre> <span class="token punctuation">&#125;</span></pre></td></tr><tr><td data-num="149"></td><td><pre> <span class="token comment">// 画第四条黄金线</span></pre></td></tr><tr><td data-num="150"></td><td><pre> ctx<span class="token punctuation">.</span><span class="token function">moveTo</span><span class="token punctuation">(</span>x<span class="token punctuation">,</span> yD<span class="token punctuation">)</span></pre></td></tr><tr><td data-num="151"></td><td><pre> ctx<span class="token punctuation">.</span><span class="token function">lineTo</span><span class="token punctuation">(</span>x <span class="token operator">+</span> viewport<span class="token punctuation">.</span>barSpace <span class="token operator">/</span> <span class="token number">2</span><span class="token punctuation">,</span> yD<span class="token punctuation">)</span></pre></td></tr><tr><td data-num="152"></td><td><pre> <span class="token keyword">if</span> <span class="token punctuation">(</span>i <span class="token operator">===</span> end<span class="token punctuation">)</span> <span class="token punctuation">&#123;</span></pre></td></tr><tr><td data-num="153"></td><td><pre> ctx<span class="token punctuation">.</span><span class="token function">fillText</span><span class="token punctuation">(</span>goldenSectionLineD<span class="token punctuation">.</span><span class="token function">toFixed</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">,</span> x <span class="token operator">+</span> viewport<span class="token punctuation">.</span>dataSpace<span class="token punctuation">,</span> yD<span class="token punctuation">)</span></pre></td></tr><tr><td data-num="154"></td><td><pre> <span class="token punctuation">&#125;</span></pre></td></tr><tr><td data-num="155"></td><td><pre> <span class="token comment">// 画第五条黄金线</span></pre></td></tr><tr><td data-num="156"></td><td><pre> ctx<span class="token punctuation">.</span><span class="token function">moveTo</span><span class="token punctuation">(</span>x<span class="token punctuation">,</span> yE<span class="token punctuation">)</span></pre></td></tr><tr><td data-num="157"></td><td><pre> ctx<span class="token punctuation">.</span><span class="token function">lineTo</span><span class="token punctuation">(</span>x <span class="token operator">+</span> viewport<span class="token punctuation">.</span>barSpace <span class="token operator">/</span> <span class="token number">2</span><span class="token punctuation">,</span> yE<span class="token punctuation">)</span></pre></td></tr><tr><td data-num="158"></td><td><pre> <span class="token keyword">if</span> <span class="token punctuation">(</span>i <span class="token operator">===</span> end<span class="token punctuation">)</span> <span class="token punctuation">&#123;</span></pre></td></tr><tr><td data-num="159"></td><td><pre> ctx<span class="token punctuation">.</span><span class="token function">fillText</span><span class="token punctuation">(</span>goldenSectionLineE<span class="token punctuation">.</span><span class="token function">toFixed</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">,</span> x <span class="token operator">+</span> viewport<span class="token punctuation">.</span>dataSpace<span class="token punctuation">,</span> yE<span class="token punctuation">)</span></pre></td></tr><tr><td data-num="160"></td><td><pre> <span class="token punctuation">&#125;</span></pre></td></tr><tr><td data-num="161"></td><td><pre> ctx<span class="token punctuation">.</span><span class="token function">stroke</span><span class="token punctuation">(</span><span class="token punctuation">)</span></pre></td></tr><tr><td data-num="162"></td><td><pre> ctx<span class="token punctuation">.</span><span class="token function">closePath</span><span class="token punctuation">(</span><span class="token punctuation">)</span></pre></td></tr><tr><td data-num="163"></td><td><pre> <span class="token punctuation">&#125;</span></pre></td></tr><tr><td data-num="164"></td><td><pre> <span class="token comment">// 计算 X 轴的下一个位置</span></pre></td></tr><tr><td data-num="165"></td><td><pre> x <span class="token operator">+=</span> viewport<span class="token punctuation">.</span>dataSpace</pre></td></tr><tr><td data-num="166"></td><td><pre> <span class="token punctuation">&#125;</span><span class="token punctuation">)</span></pre></td></tr><tr><td data-num="167"></td><td><pre> <span class="token punctuation">&#125;</span></pre></td></tr><tr><td data-num="168"></td><td><pre><span class="token punctuation">&#125;</span><span class="token punctuation">)</span></pre></td></tr></table></figure><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-01-14 08:58:17" itemprop="dateModified" datetime="2023-01-14T08:58:17+08:00">2023-01-14</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://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 实现自定义指标画图">https://blog.jingxiyuan.cn/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:&#x2F;&#x2F;nas.hitoli.com:18014&#x2F;images&#x2F;2022&#x2F;10&#x2F;29&#x2F;6833939bly1giclwuom7cj20zk0m8dvn.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:&#x2F;&#x2F;nas.hitoli.com:18014&#x2F;images&#x2F;2022&#x2F;10&#x2F;29&#x2F;6833939bly1gicis3attqj20zk0m8k7l.jpg" title="Win10彻底关闭wsappx进程"><span class="type">下一篇</span> <span class="category"><i class="ic i-flag"></i> 解决问题</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></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">38</span> <span class="name">文章</span></a></div><div class="item categories"><a href="/categories/"><span class="count">18</span> <span class="name">分类</span></a></div><div class="item tags"><a href="/tags/"><span class="count">63</span> <span class="name">标签</span></a></div></nav><div class="social"><span class="exturl item weibo" data-url="aHR0cHM6Ly93ZWliby5jb20vdS8xMDYxNDYwNzQ1" title="https:&#x2F;&#x2F;weibo.com&#x2F;u&#x2F;1061460745"><i class="ic i-weibo"></i></span> <span class="exturl item douban" data-url="aHR0cHM6Ly93d3cuZG91YmFuLmNvbS9wZW9wbGUvMjU5Mzc2NTY0" title="https:&#x2F;&#x2F;www.douban.com&#x2F;people&#x2F;259376564"><i class="ic i-douban"></i></span> <span class="exturl item music" data-url="aHR0cHM6Ly9tdXNpYy4xNjMuY29tLyMvdXNlci9ob21lP2lkPTEwNTQ2NzQ2Mw==" title="https:&#x2F;&#x2F;music.163.com&#x2F;#&#x2F;user&#x2F;home?id&#x3D;105467463"><i class="ic i-cloud-music"></i></span> <a href="/about/me" title="about&#x2F;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"><a href="/about/me" rel="section"><i class="ic i-user"></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"><span class="exturl" data-url="aHR0cHM6Ly93d3cuZm9yZXZlcmJsb2cuY24vZ28uaHRtbA=="><i class="ic i-paper-plane"></i>虫洞</span></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/11/30/%E5%B0%86nginx%E6%9B%BF%E6%8D%A2%E4%B8%BAtengine/" title="将nginx替换为tengine">将nginx替换为tengine</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/11/svn%E5%BA%93%E8%BD%ACgit%E5%BA%93/" title="svn库转git库">svn库转git库</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> <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/Highcharts/" title="分类于 Highcharts">Highcharts</a></div><span><a href="/2023/01/10/Highcharts%E7%94%BB%E6%94%B6%E7%9B%8A%E6%A6%82%E8%A7%88/" title="Highcharts画收益概览">Highcharts画收益概览</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/%E8%A7%A3%E5%86%B3%E9%97%AE%E9%A2%98/" title="分类于 解决问题">解决问题</a></div><span><a href="/2022/12/05/Win10%E5%BD%BB%E5%BA%95%E5%85%B3%E9%97%ADwsappx%E8%BF%9B%E7%A8%8B/" title="Win10彻底关闭wsappx进程">Win10彻底关闭wsappx进程</a></span></li><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/10/14/nginx%E5%85%81%E8%AE%B8%E8%B7%A8%E5%9F%9F%E8%8E%B7%E5%8F%96cookies%E6%96%B9%E6%B3%95/" title="nginx允许跨域获取cookie的方法">nginx允许跨域获取cookie的方法</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></div><span><a href="/2022/09/16/%E6%9E%81%E7%A9%BA%E9%97%B4chevereto%E5%9B%BE%E5%BA%8Adocker%E7%89%88%E5%AE%89%E8%A3%85/" title="极空间chevereto图床docker版安装">极空间chevereto图床docker版安装</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> <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/Vue/" title="分类于 Vue">Vue</a></div><span><a href="/2022/11/09/Vue%E6%8C%89%E7%8E%AF%E5%A2%83%E8%AE%BE%E7%BD%AE%E7%BC%96%E8%AF%91%E9%A1%B9%E7%9B%AE/" title="Vue按环境设置编译项目">Vue按环境设置编译项目</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/09/22/protobuf%E7%94%9F%E6%88%90js%E6%96%87%E4%BB%B6/" title="protobuf生成js文件">protobuf生成js文件</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></div><span><a href="/2022/10/20/%E6%9E%81%E7%A9%BA%E9%97%B4Docker%E7%89%88Wordpress%E5%AE%89%E8%A3%85%E4%B8%8E%E9%85%8D%E7%BD%AE/" title="极空间Docker版Wordpress安装与配置">极空间Docker版Wordpress安装与配置</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/31/%E4%B8%80%E9%94%AE%E5%85%B3%E9%97%ADWindows10-11%E7%B3%BB%E7%BB%9F%E8%87%AA%E5%8A%A8%E6%9B%B4%E6%96%B0/" title="一键关闭Windows10&#x2F;11系统自动更新">一键关闭Windows10/11系统自动更新</a></span></li></ul></div><div><h2>最新评论</h2><ul class="leancloud-recent-comment"></ul></div></div><div class="status"><div class="copyright">&copy; 2010 – <span itemprop="copyrightYear">2023</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="站点总字数">72k 字</span> <span class="post-meta-divider">|</span> <span class="post-meta-item-icon"><i class="ic i-coffee"></i> </span><span title="站点阅读时长">1:06</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://cdn.polyfill.io/v2/polyfill.js"></script><script src="//cdn.jsdelivr.net/combine/npm/pace-js@1.0.2/pace.min.js,npm/pjax@0.2.8/pjax.min.js,npm/whatwg-fetch@3.4.0/dist/fetch.umd.min.js,npm/animejs@3.2.0/lib/anime.min.js,npm/algoliasearch@4/dist/algoliasearch-lite.umd.js,npm/instantsearch.js@4/dist/instantsearch.production.min.js,npm/lozad@1/dist/lozad.min.js,npm/quicklink@2/dist/quicklink.umd.js"></script><script src="/js/app.js?v=0.0.0"></script></body></html>
Reference in New Issue View Git Blame Copy Permalink