lht/blog
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
blog/2023/01/10/Highcharts画收益概览/index.html
qinglong b23d512b59 Site updated: 2024-09-29 17:23:07
2024-09-29 17:23:10 +08:00

1 line
72 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://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="Highcharts"><link rel="canonical" href="https://hitoli.com/2023/01/10/Highcharts%E7%94%BB%E6%94%B6%E7%9B%8A%E6%A6%82%E8%A7%88/"><title>Highcharts 画收益概览 - Highcharts - 工作 | ☆∵∴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">Highcharts 画收益概览</h1><div class="meta"><span class="item" title="创建时间：2023-01-10 09:51:00"><span class="icon"><i class="ic i-calendar"></i> </span><span class="text">发表于</span> <time itemprop="dateCreated datePublished" datetime="2023-01-10T09:51:00+08:00">2023-01-10</time> </span><span class="item" title="本文字数"><span class="icon"><i class="ic i-pen"></i> </span><span class="text">本文字数</span> <span>8.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>8 分钟</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/6833939bly1gipeyonbf9j20zk0m8e81.jpg"></li><li class="item" data-background-image="https://nas.hitoli.com:18014/images/2022/10/29/6833939bly1giclip4jbpj20zk0m87cv.jpg"></li><li class="item" data-background-image="https://nas.hitoli.com:18014/images/2022/10/29/6833939bly1giciusoyjnj219g0u0x56.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/6833939bly1giclh3brzpj20zk0m8ann.jpg"></li><li class="item" data-background-image="https://nas.hitoli.com:18014/images/2022/10/29/6833939bly1giciub8ja1j20zk0m81ky.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/Highcharts/" itemprop="item" rel="index" title="分类于 Highcharts"><span itemprop="name">Highcharts</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/2023/01/10/Highcharts%E7%94%BB%E6%94%B6%E7%9B%8A%E6%A6%82%E8%A7%88/"><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>项目中需要画一幅收益概览图，研究了一下 Highcharts 的用法。特此收录方便以后再次使用时查阅。<br><img data-src="https://nas.hitoli.com:18014/images/2023/01/10/1ef80bfe8b5ee82aec0e2549e8c68e2c.png" alt="1ef80bfe8b5ee82aec0e2549e8c68e2c.png"></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><span class="line">169</span><br><span class="line">170</span><br><span class="line">171</span><br><span class="line">172</span><br><span class="line">173</span><br><span class="line">174</span><br><span class="line">175</span><br><span class="line">176</span><br><span class="line">177</span><br><span class="line">178</span><br><span class="line">179</span><br><span class="line">180</span><br><span class="line">181</span><br><span class="line">182</span><br><span class="line">183</span><br><span class="line">184</span><br><span class="line">185</span><br><span class="line">186</span><br><span class="line">187</span><br><span class="line">188</span><br><span class="line">189</span><br><span class="line">190</span><br><span class="line">191</span><br><span class="line">192</span><br><span class="line">193</span><br><span class="line">194</span><br><span class="line">195</span><br><span class="line">196</span><br><span class="line">197</span><br><span class="line">198</span><br><span class="line">199</span><br><span class="line">200</span><br><span class="line">201</span><br><span class="line">202</span><br><span class="line">203</span><br><span class="line">204</span><br><span class="line">205</span><br><span class="line">206</span><br><span class="line">207</span><br><span class="line">208</span><br><span class="line">209</span><br><span class="line">210</span><br><span class="line">211</span><br><span class="line">212</span><br><span class="line">213</span><br><span class="line">214</span><br><span class="line">215</span><br><span class="line">216</span><br><span class="line">217</span><br><span class="line">218</span><br><span class="line">219</span><br><span class="line">220</span><br><span class="line">221</span><br><span class="line">222</span><br><span class="line">223</span><br><span class="line">224</span><br><span class="line">225</span><br><span class="line">226</span><br><span class="line">227</span><br><span class="line">228</span><br><span class="line">229</span><br><span class="line">230</span><br><span class="line">231</span><br><span class="line">232</span><br><span class="line">233</span><br><span class="line">234</span><br><span class="line">235</span><br><span class="line">236</span><br><span class="line">237</span><br><span class="line">238</span><br><span class="line">239</span><br><span class="line">240</span><br><span class="line">241</span><br><span class="line">242</span><br><span class="line">243</span><br><span class="line">244</span><br><span class="line">245</span><br><span class="line">246</span><br><span class="line">247</span><br><span class="line">248</span><br><span class="line">249</span><br><span class="line">250</span><br><span class="line">251</span><br><span class="line">252</span><br><span class="line">253</span><br><span class="line">254</span><br><span class="line">255</span><br><span class="line">256</span><br><span class="line">257</span><br><span class="line">258</span><br><span class="line">259</span><br><span class="line">260</span><br><span class="line">261</span><br><span class="line">262</span><br><span class="line">263</span><br><span class="line">264</span><br><span class="line">265</span><br><span class="line">266</span><br><span class="line">267</span><br><span class="line">268</span><br><span class="line">269</span><br><span class="line">270</span><br><span class="line">271</span><br><span class="line">272</span><br><span class="line">273</span><br><span class="line">274</span><br><span class="line">275</span><br><span class="line">276</span><br><span class="line">277</span><br><span class="line">278</span><br><span class="line">279</span><br><span class="line">280</span><br><span class="line">281</span><br><span class="line">282</span><br><span class="line">283</span><br><span class="line">284</span><br><span class="line">285</span><br><span class="line">286</span><br><span class="line">287</span><br><span class="line">288</span><br><span class="line">289</span><br><span class="line">290</span><br><span class="line">291</span><br><span class="line">292</span><br><span class="line">293</span><br><span class="line">294</span><br><span class="line">295</span><br><span class="line">296</span><br><span class="line">297</span><br><span class="line">298</span><br><span class="line">299</span><br><span class="line">300</span><br><span class="line">301</span><br><span class="line">302</span><br><span class="line">303</span><br><span class="line">304</span><br><span class="line">305</span><br><span class="line">306</span><br><span class="line">307</span><br><span class="line">308</span><br><span class="line">309</span><br><span class="line">310</span><br><span class="line">311</span><br><span class="line">312</span><br><span class="line">313</span><br><span class="line">314</span><br><span class="line">315</span><br><span class="line">316</span><br><span class="line">317</span><br><span class="line">318</span><br><span class="line">319</span><br><span class="line">320</span><br><span class="line">321</span><br><span class="line">322</span><br><span class="line">323</span><br><span class="line">324</span><br><span class="line">325</span><br><span class="line">326</span><br><span class="line">327</span><br><span class="line">328</span><br><span class="line">329</span><br><span class="line">330</span><br><span class="line">331</span><br><span class="line">332</span><br><span class="line">333</span><br><span class="line">334</span><br><span class="line">335</span><br><span class="line">336</span><br><span class="line">337</span><br><span class="line">338</span><br><span class="line">339</span><br><span class="line">340</span><br><span class="line">341</span><br><span class="line">342</span><br><span class="line">343</span><br><span class="line">344</span><br><span class="line">345</span><br><span class="line">346</span><br><span class="line">347</span><br><span class="line">348</span><br><span class="line">349</span><br><span class="line">350</span><br><span class="line">351</span><br><span class="line">352</span><br><span class="line">353</span><br><span class="line">354</span><br><span class="line">355</span><br><span class="line">356</span><br><span class="line">357</span><br><span class="line">358</span><br><span class="line">359</span><br><span class="line">360</span><br><span class="line">361</span><br><span class="line">362</span><br><span class="line">363</span><br><span class="line">364</span><br><span class="line">365</span><br><span class="line">366</span><br><span class="line">367</span><br><span class="line">368</span><br><span class="line">369</span><br><span class="line">370</span><br><span class="line">371</span><br><span class="line">372</span><br><span class="line">373</span><br><span class="line">374</span><br><span class="line">375</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// x轴时间集合</span></span><br><span class="line"><span class="keyword">var</span> chartXAxisDateTimes = [<span class="string">&#x27;2022-01-01 00:00:00&#x27;</span>, <span class="string">&#x27;2022-02-01 00:00:00&#x27;</span>, <span class="string">&#x27;2022-03-01 00:00:00&#x27;</span>, <span class="string">&#x27;2022-04-01 00:00:00&#x27;</span>, <span class="string">&#x27;2022-05-01 00:00:00&#x27;</span>]</span><br><span class="line"></span><br><span class="line"><span class="comment">// y轴数据集合</span></span><br><span class="line"><span class="keyword">var</span> chartYAxisDatas = [</span><br><span class="line"> &#123;</span><br><span class="line"> <span class="attr">title</span>: <span class="string">&#x27;累计收益&#x27;</span>,</span><br><span class="line"> <span class="attr">name</span>: <span class="string">&#x27;我的策略累计收益&#x27;</span>,</span><br><span class="line"> <span class="attr">type</span>: <span class="string">&#x27;spline&#x27;</span>,</span><br><span class="line"> <span class="attr">unit</span>: <span class="string">&#x27;%&#x27;</span>,</span><br><span class="line"> <span class="attr">valueDecimals</span>: <span class="number">3</span>,</span><br><span class="line"> <span class="attr">height</span>: <span class="string">&#x27;28%&#x27;</span>,</span><br><span class="line"> <span class="attr">yAxisIndex</span>: <span class="number">0</span>, <span class="comment">// y轴分区index（从上到下，默认从0开始）</span></span><br><span class="line"> <span class="attr">data</span>: [&#123;</span><br><span class="line"> <span class="attr">x</span>: <span class="keyword">new</span> <span class="title class_">Date</span>(<span class="string">&#x27;2022-01-01 00:00:00&#x27;</span>).<span class="title function_">getTime</span>(),</span><br><span class="line"> <span class="attr">y</span>: <span class="number">1</span>,</span><br><span class="line"> <span class="attr">color</span>: <span class="string">&#x27;&#x27;</span></span><br><span class="line"> &#125;,</span><br><span class="line"> &#123;</span><br><span class="line"> <span class="attr">x</span>: <span class="keyword">new</span> <span class="title class_">Date</span>(<span class="string">&#x27;2022-02-01 00:00:00&#x27;</span>).<span class="title function_">getTime</span>(),</span><br><span class="line"> <span class="attr">y</span>: <span class="number">2</span>,</span><br><span class="line"> <span class="attr">color</span>: <span class="string">&#x27;&#x27;</span></span><br><span class="line"> &#125;,</span><br><span class="line"> &#123;</span><br><span class="line"> <span class="attr">x</span>: <span class="keyword">new</span> <span class="title class_">Date</span>(<span class="string">&#x27;2022-03-01 00:00:00&#x27;</span>).<span class="title function_">getTime</span>(),</span><br><span class="line"> <span class="attr">y</span>: <span class="number">3</span>,</span><br><span class="line"> <span class="attr">color</span>: <span class="string">&#x27;&#x27;</span></span><br><span class="line"> &#125;,</span><br><span class="line"> &#123;</span><br><span class="line"> <span class="attr">x</span>: <span class="keyword">new</span> <span class="title class_">Date</span>(<span class="string">&#x27;2022-04-01 00:00:00&#x27;</span>).<span class="title function_">getTime</span>(),</span><br><span class="line"> <span class="attr">y</span>: <span class="number">4</span>,</span><br><span class="line"> <span class="attr">color</span>: <span class="string">&#x27;&#x27;</span></span><br><span class="line"> &#125;,</span><br><span class="line"> &#123;</span><br><span class="line"> <span class="attr">x</span>: <span class="keyword">new</span> <span class="title class_">Date</span>(<span class="string">&#x27;2022-05-01 00:00:00&#x27;</span>).<span class="title function_">getTime</span>(),</span><br><span class="line"> <span class="attr">y</span>: <span class="number">5</span>,</span><br><span class="line"> <span class="attr">color</span>: <span class="string">&#x27;&#x27;</span></span><br><span class="line"> &#125;]</span><br><span class="line"> &#125;,</span><br><span class="line"> &#123;</span><br><span class="line"> <span class="attr">title</span>: <span class="string">&#x27;每月盈亏&#x27;</span>,</span><br><span class="line"> <span class="attr">name</span>: <span class="string">&#x27;当月盈利&#x27;</span>,</span><br><span class="line"> <span class="attr">type</span>: <span class="string">&#x27;column&#x27;</span>,</span><br><span class="line"> <span class="attr">unit</span>: <span class="string">&#x27;k&#x27;</span>,</span><br><span class="line"> <span class="attr">valueDecimals</span>: <span class="number">0</span>,</span><br><span class="line"> <span class="attr">top</span>: <span class="string">&#x27;34%&#x27;</span>,</span><br><span class="line"> <span class="attr">height</span>: <span class="string">&#x27;28%&#x27;</span>,</span><br><span class="line"> <span class="attr">yAxisIndex</span>: <span class="number">1</span>, <span class="comment">// y轴分区index（从上到下，默认从0开始）</span></span><br><span class="line"> <span class="attr">formatter</span>: <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line"> <span class="keyword">return</span> <span class="variable language_">this</span>.<span class="property">value</span> &lt; <span class="number">0</span> ? (-<span class="variable language_">this</span>.<span class="property">value</span>) + <span class="string">&#x27;k&#x27;</span> : <span class="variable language_">this</span>.<span class="property">value</span> + <span class="string">&#x27;k&#x27;</span></span><br><span class="line"> &#125;,</span><br><span class="line"> <span class="attr">data</span>: [&#123;</span><br><span class="line"> <span class="attr">x</span>: <span class="keyword">new</span> <span class="title class_">Date</span>(<span class="string">&#x27;2022-01-01 00:00:00&#x27;</span>).<span class="title function_">getTime</span>(),</span><br><span class="line"> <span class="attr">y</span>: <span class="number">1</span>,</span><br><span class="line"> <span class="attr">color</span>: <span class="string">&#x27;&#x27;</span></span><br><span class="line"> &#125;,</span><br><span class="line"> &#123;</span><br><span class="line"> <span class="attr">x</span>: <span class="keyword">new</span> <span class="title class_">Date</span>(<span class="string">&#x27;2022-02-01 00:00:00&#x27;</span>).<span class="title function_">getTime</span>(),</span><br><span class="line"> <span class="attr">y</span>: <span class="number">2</span>,</span><br><span class="line"> <span class="attr">color</span>: <span class="string">&#x27;&#x27;</span></span><br><span class="line"> &#125;,</span><br><span class="line"> &#123;</span><br><span class="line"> <span class="attr">x</span>: <span class="keyword">new</span> <span class="title class_">Date</span>(<span class="string">&#x27;2022-03-01 00:00:00&#x27;</span>).<span class="title function_">getTime</span>(),</span><br><span class="line"> <span class="attr">y</span>: <span class="number">3</span>,</span><br><span class="line"> <span class="attr">color</span>: <span class="string">&#x27;&#x27;</span></span><br><span class="line"> &#125;,</span><br><span class="line"> &#123;</span><br><span class="line"> <span class="attr">x</span>: <span class="keyword">new</span> <span class="title class_">Date</span>(<span class="string">&#x27;2022-04-01 00:00:00&#x27;</span>).<span class="title function_">getTime</span>(),</span><br><span class="line"> <span class="attr">y</span>: <span class="number">4</span>,</span><br><span class="line"> <span class="attr">color</span>: <span class="string">&#x27;&#x27;</span></span><br><span class="line"> &#125;,</span><br><span class="line"> &#123;</span><br><span class="line"> <span class="attr">x</span>: <span class="keyword">new</span> <span class="title class_">Date</span>(<span class="string">&#x27;2022-05-01 00:00:00&#x27;</span>).<span class="title function_">getTime</span>(),</span><br><span class="line"> <span class="attr">y</span>: <span class="number">5</span>,</span><br><span class="line"> <span class="attr">color</span>: <span class="string">&#x27;&#x27;</span></span><br><span class="line"> &#125;]</span><br><span class="line"> &#125;,</span><br><span class="line"> &#123;</span><br><span class="line"> <span class="attr">title</span>: <span class="string">&#x27;成交记录&#x27;</span>,</span><br><span class="line"> <span class="attr">name</span>: <span class="string">&#x27;当月买入&#x27;</span>,</span><br><span class="line"> <span class="attr">type</span>: <span class="string">&#x27;column&#x27;</span>,</span><br><span class="line"> <span class="attr">unit</span>: <span class="string">&#x27;k&#x27;</span>,</span><br><span class="line"> <span class="attr">valueDecimals</span>: <span class="number">0</span>,</span><br><span class="line"> <span class="attr">top</span>: <span class="string">&#x27;68%&#x27;</span>,</span><br><span class="line"> <span class="attr">height</span>: <span class="string">&#x27;28%&#x27;</span>,</span><br><span class="line"> <span class="attr">yAxisIndex</span>: <span class="number">2</span>, <span class="comment">// y轴分区index（从上到下，默认从0开始）</span></span><br><span class="line"> <span class="attr">data</span>: [&#123;</span><br><span class="line"> <span class="attr">x</span>: <span class="keyword">new</span> <span class="title class_">Date</span>(<span class="string">&#x27;2022-01-01 00:00:00&#x27;</span>).<span class="title function_">getTime</span>(),</span><br><span class="line"> <span class="attr">y</span>: <span class="number">1</span>,</span><br><span class="line"> <span class="attr">color</span>: <span class="string">&#x27;red&#x27;</span></span><br><span class="line"> &#125;,</span><br><span class="line"> &#123;</span><br><span class="line"> <span class="attr">x</span>: <span class="keyword">new</span> <span class="title class_">Date</span>(<span class="string">&#x27;2022-02-01 00:00:00&#x27;</span>).<span class="title function_">getTime</span>(),</span><br><span class="line"> <span class="attr">y</span>: <span class="number">2</span>,</span><br><span class="line"> <span class="attr">color</span>: <span class="string">&#x27;red&#x27;</span></span><br><span class="line"> &#125;,</span><br><span class="line"> &#123;</span><br><span class="line"> <span class="attr">x</span>: <span class="keyword">new</span> <span class="title class_">Date</span>(<span class="string">&#x27;2022-03-01 00:00:00&#x27;</span>).<span class="title function_">getTime</span>(),</span><br><span class="line"> <span class="attr">y</span>: <span class="number">3</span>,</span><br><span class="line"> <span class="attr">color</span>: <span class="string">&#x27;red&#x27;</span></span><br><span class="line"> &#125;,</span><br><span class="line"> &#123;</span><br><span class="line"> <span class="attr">x</span>: <span class="keyword">new</span> <span class="title class_">Date</span>(<span class="string">&#x27;2022-04-01 00:00:00&#x27;</span>).<span class="title function_">getTime</span>(),</span><br><span class="line"> <span class="attr">y</span>: <span class="number">4</span>,</span><br><span class="line"> <span class="attr">color</span>: <span class="string">&#x27;red&#x27;</span></span><br><span class="line"> &#125;,</span><br><span class="line"> &#123;</span><br><span class="line"> <span class="attr">x</span>: <span class="keyword">new</span> <span class="title class_">Date</span>(<span class="string">&#x27;2022-05-01 00:00:00&#x27;</span>).<span class="title function_">getTime</span>(),</span><br><span class="line"> <span class="attr">y</span>: <span class="number">5</span>,</span><br><span class="line"> <span class="attr">color</span>: <span class="string">&#x27;red&#x27;</span></span><br><span class="line"> &#125;]</span><br><span class="line"> &#125;,</span><br><span class="line"> &#123;</span><br><span class="line"> <span class="attr">title</span>: <span class="string">&#x27;成交记录&#x27;</span>,</span><br><span class="line"> <span class="attr">name</span>: <span class="string">&#x27;当月卖出&#x27;</span>,</span><br><span class="line"> <span class="attr">type</span>: <span class="string">&#x27;column&#x27;</span>,</span><br><span class="line"> <span class="attr">unit</span>: <span class="string">&#x27;k&#x27;</span>,</span><br><span class="line"> <span class="attr">valueDecimals</span>: <span class="number">0</span>,</span><br><span class="line"> <span class="attr">top</span>: <span class="string">&#x27;68%&#x27;</span>,</span><br><span class="line"> <span class="attr">height</span>: <span class="string">&#x27;28%&#x27;</span>,</span><br><span class="line"> <span class="attr">yAxisIndex</span>: <span class="number">2</span>, <span class="comment">// y轴分区index（从上到下，默认从0开始）</span></span><br><span class="line"> <span class="attr">data</span>: [&#123;</span><br><span class="line"> <span class="attr">x</span>: <span class="keyword">new</span> <span class="title class_">Date</span>(<span class="string">&#x27;2022-01-01 00:00:00&#x27;</span>).<span class="title function_">getTime</span>(),</span><br><span class="line"> <span class="attr">y</span>: <span class="number">1</span>,</span><br><span class="line"> <span class="attr">color</span>: <span class="string">&#x27;green&#x27;</span></span><br><span class="line"> &#125;,</span><br><span class="line"> &#123;</span><br><span class="line"> <span class="attr">x</span>: <span class="keyword">new</span> <span class="title class_">Date</span>(<span class="string">&#x27;2022-02-01 00:00:00&#x27;</span>).<span class="title function_">getTime</span>(),</span><br><span class="line"> <span class="attr">y</span>: <span class="number">2</span>,</span><br><span class="line"> <span class="attr">color</span>: <span class="string">&#x27;green&#x27;</span></span><br><span class="line"> &#125;,</span><br><span class="line"> &#123;</span><br><span class="line"> <span class="attr">x</span>: <span class="keyword">new</span> <span class="title class_">Date</span>(<span class="string">&#x27;2022-03-01 00:00:00&#x27;</span>).<span class="title function_">getTime</span>(),</span><br><span class="line"> <span class="attr">y</span>: <span class="number">3</span>,</span><br><span class="line"> <span class="attr">color</span>: <span class="string">&#x27;green&#x27;</span></span><br><span class="line"> &#125;,</span><br><span class="line"> &#123;</span><br><span class="line"> <span class="attr">x</span>: <span class="keyword">new</span> <span class="title class_">Date</span>(<span class="string">&#x27;2022-04-01 00:00:00&#x27;</span>).<span class="title function_">getTime</span>(),</span><br><span class="line"> <span class="attr">y</span>: <span class="number">4</span>,</span><br><span class="line"> <span class="attr">color</span>: <span class="string">&#x27;green&#x27;</span></span><br><span class="line"> &#125;,</span><br><span class="line"> &#123;</span><br><span class="line"> <span class="attr">x</span>: <span class="keyword">new</span> <span class="title class_">Date</span>(<span class="string">&#x27;2022-05-01 00:00:00&#x27;</span>).<span class="title function_">getTime</span>(),</span><br><span class="line"> <span class="attr">y</span>: <span class="number">5</span>,</span><br><span class="line"> <span class="attr">color</span>: <span class="string">&#x27;green&#x27;</span></span><br><span class="line"> &#125;]</span><br><span class="line"> &#125;</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">var</span> plotBandScope = [<span class="keyword">new</span> <span class="title class_">Date</span>(<span class="string">&#x27;2022-02-01 00:00:00&#x27;</span>).<span class="title function_">getTime</span>(), <span class="keyword">new</span> <span class="title class_">Date</span>(<span class="string">&#x27;2022-04-01 00:00:00&#x27;</span>).<span class="title function_">getTime</span>()]</span><br><span class="line"></span><br><span class="line"><span class="comment">// 图表配置</span></span><br><span class="line"><span class="keyword">var</span> option = &#123;</span><br><span class="line"> <span class="attr">chart</span>: &#123;</span><br><span class="line"> <span class="attr">height</span>: <span class="number">600</span>,</span><br><span class="line"> <span class="attr">type</span>: <span class="string">&#x27;spline&#x27;</span> <span class="comment">// 指定图表的类型，默认是折线图（line)</span></span><br><span class="line"> &#125;,</span><br><span class="line"> <span class="attr">plotOptions</span>: &#123;</span><br><span class="line"> <span class="attr">spline</span>: &#123;</span><br><span class="line"> <span class="attr">borderWidth</span>: <span class="number">0</span>,</span><br><span class="line"> <span class="attr">lineWidth</span>: <span class="number">1</span>,</span><br><span class="line"> <span class="attr">states</span>: &#123;</span><br><span class="line"> <span class="attr">hover</span>: &#123;</span><br><span class="line"> <span class="attr">lineWidth</span>: <span class="number">2</span></span><br><span class="line"> &#125;</span><br><span class="line"> &#125;,</span><br><span class="line"> <span class="comment">// pointWidth: 4, // 柱子内宽度容</span></span><br><span class="line"> <span class="attr">dataLabels</span>: &#123;</span><br><span class="line"> <span class="attr">style</span>: &#123;</span><br><span class="line"> <span class="attr">fontSize</span>: <span class="number">11</span></span><br><span class="line"> &#125;,</span><br><span class="line"> <span class="attr">enabled</span>: <span class="literal">false</span></span><br><span class="line"> &#125;,</span><br><span class="line"> <span class="attr">showInLegend</span>: <span class="literal">true</span></span><br><span class="line"> &#125;,</span><br><span class="line"> <span class="attr">column</span>: &#123;</span><br><span class="line"> <span class="attr">borderWidth</span>: <span class="number">0</span>,</span><br><span class="line"> <span class="attr">pointWidth</span>: <span class="number">4</span>, <span class="comment">// 柱子内宽度容</span></span><br><span class="line"> <span class="attr">dataLabels</span>: &#123;</span><br><span class="line"> <span class="attr">style</span>: &#123;</span><br><span class="line"> <span class="attr">fontSize</span>: <span class="number">11</span></span><br><span class="line"> &#125;,</span><br><span class="line"> <span class="attr">enabled</span>: <span class="literal">false</span></span><br><span class="line"> &#125;,</span><br><span class="line"> <span class="attr">showInLegend</span>: <span class="literal">true</span>,</span><br><span class="line"> <span class="attr">grouping</span>: <span class="literal">true</span></span><br><span class="line"> &#125;</span><br><span class="line"> &#125;,</span><br><span class="line"> <span class="attr">rangeSelector</span>: &#123;</span><br><span class="line"> <span class="attr">enabled</span>: <span class="literal">false</span></span><br><span class="line"> &#125;,</span><br><span class="line"> <span class="attr">credits</span>: &#123;</span><br><span class="line"> <span class="attr">enabled</span>: <span class="literal">false</span></span><br><span class="line"> &#125;,</span><br><span class="line"> <span class="comment">// legend: &#123;</span></span><br><span class="line"> <span class="comment">// enabled: true,</span></span><br><span class="line"> <span class="comment">// verticalAlign: &#x27;top&#x27;</span></span><br><span class="line"> <span class="comment">// &#125;,</span></span><br><span class="line"> <span class="attr">navigator</span>: &#123; <span class="comment">// 导航器样式</span></span><br><span class="line"> <span class="attr">enabled</span>: <span class="literal">true</span>,</span><br><span class="line"> <span class="attr">height</span>: <span class="number">20</span></span><br><span class="line"> &#125;,</span><br><span class="line"> <span class="attr">scrollbar</span>: &#123; <span class="comment">// 滚动条样式</span></span><br><span class="line"> <span class="attr">barBackgroundColor</span>: <span class="string">&#x27;rgb(209, 218, 237)&#x27;</span>,</span><br><span class="line"> <span class="attr">barBorderRadius</span>: <span class="number">0</span>,</span><br><span class="line"> <span class="attr">barBorderWidth</span>: <span class="number">0</span>,</span><br><span class="line"> <span class="attr">buttonBackgroundColor</span>: <span class="string">&#x27;rgb(242, 242, 242)&#x27;</span>,</span><br><span class="line"> <span class="attr">buttonBorderWidth</span>: <span class="number">0</span>,</span><br><span class="line"> <span class="attr">buttonBorderRadius</span>: <span class="number">0</span>,</span><br><span class="line"> <span class="attr">trackBackgroundColor</span>: <span class="string">&#x27;none&#x27;</span>,</span><br><span class="line"> <span class="attr">trackBorderWidth</span>: <span class="number">1</span>,</span><br><span class="line"> <span class="attr">trackBorderRadius</span>: <span class="number">0</span>,</span><br><span class="line"> <span class="attr">trackBorderColor</span>: <span class="string">&#x27;#CCC&#x27;</span></span><br><span class="line"> &#125;,</span><br><span class="line"> <span class="attr">xAxis</span>: &#123;</span><br><span class="line"> <span class="attr">lineWidth</span>: <span class="number">1</span>,</span><br><span class="line"> <span class="attr">type</span>: <span class="string">&#x27;datetime&#x27;</span>,</span><br><span class="line"> <span class="attr">categories</span>: [],</span><br><span class="line"> <span class="attr">dateTimeLabelFormats</span>: &#123;</span><br><span class="line"> <span class="comment">// millisecond: &#x27;%H:%M:%S.%L&#x27;,</span></span><br><span class="line"> <span class="comment">// second: &#x27;%H:%M:%S&#x27;,</span></span><br><span class="line"> <span class="comment">// minute: &#x27;%H:%M&#x27;,</span></span><br><span class="line"> <span class="comment">// hour: &#x27;%m-%d %H:%M&#x27;,</span></span><br><span class="line"> <span class="attr">day</span>: <span class="string">&#x27;%m-%d&#x27;</span>,</span><br><span class="line"> <span class="attr">week</span>: <span class="string">&#x27;%m-%d&#x27;</span>,</span><br><span class="line"> <span class="attr">month</span>: <span class="string">&#x27;%Y-%m&#x27;</span>,</span><br><span class="line"> <span class="attr">year</span>: <span class="string">&#x27;%Y&#x27;</span></span><br><span class="line"> &#125;,</span><br><span class="line"> <span class="attr">gridLineWidth</span>: <span class="number">1</span></span><br><span class="line"> &#125;,</span><br><span class="line"> <span class="attr">yAxis</span>: [],</span><br><span class="line"> <span class="attr">tooltip</span>: &#123;</span><br><span class="line"> <span class="attr">xDateFormat</span>: <span class="string">&#x27;%Y-%m-%d %H:%M:%S&#x27;</span>,</span><br><span class="line"> <span class="attr">style</span>: &#123;</span><br><span class="line"> <span class="attr">fontSize</span>: <span class="number">16</span>,</span><br><span class="line"> <span class="attr">fontFamily</span>: <span class="string">&#x27;微软雅黑&#x27;</span>,</span><br><span class="line"> <span class="attr">fontWeight</span>: <span class="string">&#x27;normal&#x27;</span>,</span><br><span class="line"> <span class="attr">color</span>: <span class="string">&#x27;#666&#x27;</span>,</span><br><span class="line"> <span class="attr">padding</span>: <span class="number">10</span>,</span><br><span class="line"> <span class="attr">borderWidth</span>: <span class="number">0</span>,</span><br><span class="line"> <span class="attr">backgroundColor</span>: <span class="string">&#x27;#ddd&#x27;</span></span><br><span class="line"> &#125;,</span><br><span class="line"> <span class="attr">shared</span>: <span class="literal">true</span>,</span><br><span class="line"> <span class="attr">useHTML</span>: <span class="literal">true</span>,</span><br><span class="line"> <span class="attr">headerFormat</span>: <span class="string">&#x27;&lt;small style=&quot;font-size: 12px&quot;&gt;&#123;point.key&#125;&lt;/small&gt;&lt;table&gt;&#x27;</span>, <span class="comment">// 标题格式,</span></span><br><span class="line"> <span class="attr">pointFormat</span>: <span class="string">&#x27;&lt;tr&gt;&lt;td&gt;&lt;li style=&quot;color:&#123;series.color&#125;;padding:0px&quot;&gt;&#123;series.name&#125;: &lt;/li&gt;&#x27;</span> +</span><br><span class="line"> <span class="string">&#x27;&lt;div style=&quot;float: right;&quot;&gt;&#123;point.y&#125; &#123;series.tooltip.valueDecimals&#125;&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt;&#x27;</span>,</span><br><span class="line"> <span class="attr">footerFormat</span>: <span class="string">&#x27;&lt;/table&gt;&#x27;</span>,</span><br><span class="line"> <span class="attr">shadow</span>: <span class="literal">true</span>,</span><br><span class="line"> <span class="attr">followPointer</span>: <span class="literal">true</span> <span class="comment">// 跟随鼠标</span></span><br><span class="line"> &#125;,</span><br><span class="line"> <span class="attr">series</span>: []</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 根据最大回测范围修改图表配置</span></span><br><span class="line"><span class="keyword">if</span> (plotBandScope &amp;&amp; plotBandScope.<span class="property">length</span> === <span class="number">2</span>) &#123;</span><br><span class="line"> option.<span class="property">xAxis</span>.<span class="property">plotBands</span> = [&#123;</span><br><span class="line"> <span class="attr">from</span>: plotBandScope[<span class="number">0</span>],</span><br><span class="line"> <span class="attr">to</span>: plotBandScope[<span class="number">1</span>],</span><br><span class="line"> <span class="attr">color</span>: <span class="string">&#x27;#FCFFC5&#x27;</span>,</span><br><span class="line"> <span class="attr">label</span>: &#123;</span><br><span class="line"> <span class="attr">text</span>: <span class="string">&#x27;最大回测区间&#x27;</span>,</span><br><span class="line"> <span class="attr">align</span>: <span class="string">&#x27;center&#x27;</span>,</span><br><span class="line"> <span class="attr">verticalAlign</span>: <span class="string">&#x27;top&#x27;</span>,</span><br><span class="line"> <span class="attr">y</span>: <span class="number">14</span></span><br><span class="line"> &#125;</span><br><span class="line"> &#125;]</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 根据x轴时间集合修改图表配置</span></span><br><span class="line"><span class="keyword">if</span> (chartXAxisDateTimes &amp;&amp; chartXAxisDateTimes.<span class="property">length</span> &gt; <span class="number">0</span>) &#123;</span><br><span class="line"> option.<span class="property">categories</span> = chartXAxisDateTimes</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 根据y轴数据集合修改图表配置</span></span><br><span class="line"><span class="keyword">if</span> (chartYAxisDatas &amp;&amp; chartYAxisDatas.<span class="property">length</span> &gt; <span class="number">0</span>) &#123;</span><br><span class="line"> chartYAxisDatas.<span class="title function_">forEach</span>(<span class="keyword">function</span> (<span class="params">item, i</span>) &#123;</span><br><span class="line"> <span class="keyword">if</span> (item.<span class="property">type</span> === <span class="string">&#x27;spline&#x27;</span> || item.<span class="property">type</span> === <span class="string">&#x27;line&#x27;</span>) &#123;</span><br><span class="line"> option.<span class="property">yAxis</span>.<span class="title function_">push</span>(&#123;</span><br><span class="line"> <span class="attr">plotLines</span>: [&#123;</span><br><span class="line"> <span class="attr">color</span>: <span class="string">&#x27;black&#x27;</span>, <span class="comment">// 线的颜色，定义为红色</span></span><br><span class="line"> <span class="attr">dashStyle</span>: <span class="string">&#x27;solid&#x27;</span>, <span class="comment">// 默认值，这里定义为实线</span></span><br><span class="line"> <span class="attr">value</span>: <span class="number">0</span>, <span class="comment">// 定义在那个值上显示标示线，这里是在x轴上刻度为3的值处垂直化一条线</span></span><br><span class="line"> <span class="attr">width</span>: <span class="number">2</span> <span class="comment">// 标示线的宽度，2px</span></span><br><span class="line"> &#125;],</span><br><span class="line"> <span class="attr">tickAmount</span>: <span class="number">4</span>, <span class="comment">// 规定坐标轴上的刻度总数</span></span><br><span class="line"> <span class="attr">gridLineColor</span>: <span class="string">&#x27;#ddd&#x27;</span>,</span><br><span class="line"> <span class="attr">gridLineDashStyle</span>: <span class="string">&#x27;Solid&#x27;</span>,</span><br><span class="line"> <span class="attr">labels</span>: &#123; <span class="comment">// 坐标轴上刻度的样式及单位</span></span><br><span class="line"> <span class="attr">align</span>: <span class="string">&#x27;right&#x27;</span>,</span><br><span class="line"> <span class="attr">x</span>: <span class="number">6</span>,</span><br><span class="line"> <span class="attr">style</span>: &#123;</span><br><span class="line"> <span class="attr">color</span>: <span class="string">&#x27;#999999&#x27;</span>,</span><br><span class="line"> <span class="attr">fontSize</span>: <span class="number">12</span></span><br><span class="line"> &#125;,</span><br><span class="line"> <span class="attr">format</span>: <span class="string">&#x27;&#123;value&#125;&#x27;</span> + item.<span class="property">unit</span> <span class="comment">// 坐标轴上的单位</span></span><br><span class="line"> &#125;,</span><br><span class="line"> <span class="attr">title</span>: &#123;</span><br><span class="line"> <span class="attr">text</span>: item.<span class="property">title</span>,</span><br><span class="line"> <span class="attr">margin</span>: <span class="number">20</span>,</span><br><span class="line"> <span class="attr">style</span>: &#123;</span><br><span class="line"> <span class="attr">color</span>: <span class="string">&#x27;#999999&#x27;</span>,</span><br><span class="line"> <span class="attr">fontSize</span>: <span class="number">12</span>,</span><br><span class="line"> <span class="attr">align</span>: <span class="string">&#x27;middle&#x27;</span> <span class="comment">// 坐标轴对齐方式（相对于坐标轴的值） 默认是：middle居中对齐</span></span><br><span class="line"> &#125;</span><br><span class="line"> &#125;,</span><br><span class="line"> <span class="attr">height</span>: item.<span class="property">height</span>,</span><br><span class="line"> <span class="attr">lineWidth</span>: <span class="number">0</span></span><br><span class="line"> &#125;)</span><br><span class="line"> option.<span class="property">series</span>.<span class="title function_">push</span>(&#123;</span><br><span class="line"> <span class="attr">name</span>: item.<span class="property">name</span>,</span><br><span class="line"> <span class="attr">data</span>: item.<span class="property">data</span>,</span><br><span class="line"> <span class="attr">type</span>: item.<span class="property">type</span>,</span><br><span class="line"> <span class="attr">color</span>: <span class="string">&#x27;rgb(170, 70, 67)&#x27;</span>,</span><br><span class="line"> <span class="attr">tooltip</span>: &#123;</span><br><span class="line"> <span class="attr">valueSuffix</span>: item.<span class="property">unit</span>, <span class="comment">// 数值后缀</span></span><br><span class="line"> <span class="attr">valueDecimals</span>: item.<span class="property">valueDecimals</span> <span class="comment">// 提示框数据精度(保留小数点后3位)</span></span><br><span class="line"> &#125;,</span><br><span class="line"> <span class="attr">yAxis</span>: item.<span class="property">yAxisIndex</span>,</span><br><span class="line"> <span class="attr">showInNavigator</span>: <span class="literal">false</span></span><br><span class="line"> &#125;)</span><br><span class="line"> &#125; <span class="keyword">else</span> <span class="keyword">if</span> (item.<span class="property">type</span> === <span class="string">&#x27;column&#x27;</span>) &#123;</span><br><span class="line"> option.<span class="property">yAxis</span>.<span class="title function_">push</span>(&#123;</span><br><span class="line"> <span class="attr">type</span>: item.<span class="property">type</span>,</span><br><span class="line"> <span class="attr">tickAmount</span>: <span class="number">4</span>, <span class="comment">// 规定坐标轴上的刻度总数</span></span><br><span class="line"> <span class="attr">startOnTick</span>: <span class="literal">true</span>,</span><br><span class="line"> <span class="attr">reversed</span>: <span class="literal">false</span>, <span class="comment">// y轴刻度反转</span></span><br><span class="line"> <span class="attr">showFirstLabel</span>: <span class="literal">false</span>,</span><br><span class="line"> <span class="attr">showLastLabel</span>: <span class="literal">true</span>,</span><br><span class="line"> <span class="attr">gridLineColor</span>: <span class="string">&#x27;#ddd&#x27;</span>,</span><br><span class="line"> <span class="attr">gridLineDashStyle</span>: <span class="string">&#x27;Solid&#x27;</span>,</span><br><span class="line"> <span class="attr">labels</span>: &#123;</span><br><span class="line"> <span class="attr">align</span>: <span class="string">&#x27;right&#x27;</span>,</span><br><span class="line"> <span class="attr">x</span>: <span class="number">12</span>,</span><br><span class="line"> <span class="attr">style</span>: &#123;</span><br><span class="line"> <span class="attr">color</span>: <span class="string">&#x27;#999999&#x27;</span>,</span><br><span class="line"> <span class="attr">fontSize</span>: <span class="number">12</span></span><br><span class="line"> &#125;,</span><br><span class="line"> <span class="attr">formatter</span>: item.<span class="property">formatter</span>,</span><br><span class="line"> <span class="attr">format</span>: <span class="string">&#x27;&#123;value&#125;&#x27;</span> + item.<span class="property">unit</span> <span class="comment">// 坐标轴上的单位</span></span><br><span class="line"> &#125;,</span><br><span class="line"> <span class="attr">title</span>: &#123;</span><br><span class="line"> <span class="attr">text</span>: item.<span class="property">title</span>,</span><br><span class="line"> <span class="attr">margin</span>: <span class="number">20</span>,</span><br><span class="line"> <span class="attr">style</span>: &#123;</span><br><span class="line"> <span class="attr">color</span>: <span class="string">&#x27;#999999&#x27;</span>,</span><br><span class="line"> <span class="attr">fontSize</span>: <span class="number">12</span>,</span><br><span class="line"> <span class="attr">align</span>: <span class="string">&#x27;middle&#x27;</span> <span class="comment">// 坐标轴对齐方式（相对于坐标轴的值） 默认是：middle居中对齐</span></span><br><span class="line"> &#125;</span><br><span class="line"> &#125;,</span><br><span class="line"> <span class="attr">top</span>: item.<span class="property">top</span>,</span><br><span class="line"> <span class="attr">height</span>: item.<span class="property">height</span>,</span><br><span class="line"> <span class="attr">offset</span>: <span class="number">0</span>,</span><br><span class="line"> <span class="attr">lineWidth</span>: <span class="number">0</span></span><br><span class="line"> &#125;)</span><br><span class="line"> option.<span class="property">series</span>.<span class="title function_">push</span>(&#123;</span><br><span class="line"> <span class="attr">name</span>: item.<span class="property">name</span>,</span><br><span class="line"> <span class="attr">type</span>: item.<span class="property">type</span>,</span><br><span class="line"> <span class="attr">data</span>: item.<span class="property">data</span>,</span><br><span class="line"> <span class="attr">tooltip</span>: &#123;</span><br><span class="line"> <span class="attr">pointFormatter</span>: <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line"> <span class="keyword">return</span> <span class="string">&#x27;&lt;tr&gt;&lt;td&gt;&lt;li style=&quot;color: &#x27;</span> + <span class="variable language_">this</span>.<span class="property">color</span> + <span class="string">&#x27;;padding:0px;&quot;&gt;&lt;/span&gt; &#x27;</span> + item.<span class="property">name</span> +</span><br><span class="line"> <span class="string">&#x27;: &lt;/li&gt;&lt;div style=&quot;float: right;&quot;&gt;&#x27;</span> + <span class="variable language_">this</span>.<span class="property">y</span>.<span class="title function_">toFixed</span>(item.<span class="property">valueDecimals</span>) + item.<span class="property">unit</span> + <span class="string">&#x27;&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt;&#x27;</span></span><br><span class="line"> &#125;</span><br><span class="line"> &#125;,</span><br><span class="line"> <span class="attr">yAxis</span>: item.<span class="property">yAxisIndex</span>,</span><br><span class="line"> <span class="attr">showInNavigator</span>: <span class="literal">false</span></span><br><span class="line"> &#125;)</span><br><span class="line"> &#125;</span><br><span class="line"> &#125;)</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 画图（container为div的id）</span></span><br><span class="line"><span class="title class_">Highcharts</span>.<span class="title function_">stockChart</span>(<span class="string">&#x27;container&#x27;</span>, option)</span><br></pre></td></tr></table></figure><p></p><div class="tags"><a href="/tags/Highcharts/" rel="tag"><i class="ic i-tag"></i> Highcharts</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:11" itemprop="dateModified" datetime="2023-04-22T21:42:11+08:00">2023-04-22</time> </span><span id="2023/01/10/Highcharts画收益概览/" class="item leancloud_visitors" data-flag-title="Highcharts 画收益概览" 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/2023/01/10/Highcharts%E7%94%BB%E6%94%B6%E7%9B%8A%E6%A6%82%E8%A7%88/" title="Highcharts 画收益概览">https://hitoli.com/2023/01/10/Highcharts画收益概览/</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/12/05/Win10%E5%BD%BB%E5%BA%95%E5%85%B3%E9%97%ADwsappx%E8%BF%9B%E7%A8%8B/" itemprop="url" rel="prev" data-background-image="https:&#x2F;&#x2F;nas.hitoli.com:18014&#x2F;images&#x2F;2022&#x2F;10&#x2F;29&#x2F;6833939bly1giciusoyjnj219g0u0x56.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 class="item right"><a href="/2023/01/10/Vue%E6%A0%B9%E6%8D%AE%E8%B7%AF%E7%94%B1%E4%BC%A0%E5%8F%82%E4%BF%AE%E6%94%B9%E9%A1%B5%E9%9D%A2%E6%95%B0%E6%8D%AE/" itemprop="url" rel="next" data-background-image="https:&#x2F;&#x2F;nas.hitoli.com:18014&#x2F;images&#x2F;2022&#x2F;10&#x2F;29&#x2F;6833939bly1giciuja1j1j20zk0m8kjl.jpg" title="Vue根据路由传参修改页面数据"><span class="type">下一篇</span> <span class="category"><i class="ic i-flag"></i> Vue</span><h3>Vue根据路由传参修改页面数据</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="#%E4%BB%A3%E7%A0%81"><span class="toc-number">2.</span> <span class="toc-text">代码</span></a></li></ol></div><div class="related panel pjax" data-title="系列文章"><ul><li class="active"><a href="/2023/01/10/Highcharts%E7%94%BB%E6%94%B6%E7%9B%8A%E6%A6%82%E8%A7%88/" rel="bookmark" title="Highcharts画收益概览">Highcharts画收益概览</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:&#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 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/12/05/Win10%E5%BD%BB%E5%BA%95%E5%85%B3%E9%97%ADwsappx%E8%BF%9B%E7%A8%8B/" 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="/2023/01/10/Vue%E6%A0%B9%E6%8D%AE%E8%B7%AF%E7%94%B1%E4%BC%A0%E5%8F%82%E4%BF%AE%E6%94%B9%E9%A1%B5%E9%9D%A2%E6%95%B0%E6%8D%AE/" 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/%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/01/03/%E8%A7%A3%E5%86%B3Nginx%E8%AE%BF%E9%97%AE%E8%87%AA%E7%AD%BEssl%E8%AF%81%E4%B9%A6%E6%8A%A5%E4%B8%8D%E5%AE%89%E5%85%A8%E5%91%8A%E8%AD%A6/" title="解决Nginx访问自签ssl证书报不安全告警">解决Nginx访问自签ssl证书报不安全告警</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/11/30/Nginx%E5%8A%A8%E6%80%81%E8%A7%A3%E6%9E%90%E5%9F%9F%E5%90%8D%E6%96%B9%E6%A1%88/" title="Nginx动态解析域名方案">Nginx动态解析域名方案</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/01/19/IntellIJ%E5%8F%AA%E7%BC%96%E8%AF%91%E6%89%93%E5%8C%85%E6%8C%87%E5%AE%9A%E7%9A%84%E6%A8%A1%E5%9D%97/" title="IntellIJ只编译打包指定的模块">IntellIJ只编译打包指定的模块</a></span></li><li class="item"><div class="breadcrumb"><a href="/categories/%E7%94%9F%E6%B4%BB/" title="分类于 生活">生活</a> <i class="ic i-angle-right"></i> <a href="/categories/%E7%94%9F%E6%B4%BB/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/" title="分类于 技术分享">技术分享</a></div><span><a href="/2024/09/29/dante-stunnel-clash-%E7%A7%91%E5%AD%A6%E4%B8%8A%E7%BD%91/" title="dante+stunnel+clash 科学上网">dante+stunnel+clash 科学上网</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/09/23/%E8%A7%A3%E5%86%B3%E5%9F%9F%E5%90%8Dip%E5%8F%98%E5%8A%A8%E5%90%8E%E9%9C%80%E8%A6%81%E9%87%8D%E5%90%AFnginx%E7%9A%84%E9%97%AE%E9%A2%98/" title="解决域名ip变动后需要重启nginx的问题">解决域名ip变动后需要重启nginx的问题</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/Vue/" title="分类于 Vue">Vue</a></div><span><a href="/2023/01/10/Vue%E6%A0%B9%E6%8D%AE%E8%B7%AF%E7%94%B1%E4%BC%A0%E5%8F%82%E4%BF%AE%E6%94%B9%E9%A1%B5%E9%9D%A2%E6%95%B0%E6%8D%AE/" title="Vue根据路由传参修改页面数据">Vue根据路由传参修改页面数据</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/10/21/Hexo-Theme-Shoka-Valine%E8%AF%84%E8%AE%BA%E9%85%8D%E7%BD%AE/" title="Hexo + Theme.Shoka + Valine评论配置">Hexo + Theme.Shoka + Valine评论配置</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/08/21/%E5%88%A9%E7%94%A8jackson%E5%AF%B9%E8%BF%94%E5%9B%9E%E6%95%B0%E6%8D%AE%E5%81%9A%E5%AD%97%E5%85%B8%E8%BD%AC%E6%8D%A2/" title="利用jackson对返回数据做字典转换">利用jackson对返回数据做字典转换</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/%E5%B7%A5%E4%BD%9C/" title="分类于 工作">工作</a> <i class="ic i-angle-right"></i> <a href="/categories/%E5%B7%A5%E4%BD%9C/IDE/" title="分类于 IDE">IDE</a></div><span><a href="/2023/02/18/%E4%BF%AE%E6%94%B9IntellIJ-IDE%E8%83%8C%E6%99%AF%E8%89%B2%E5%92%8C%E5%AD%97%E4%BD%93%E5%A4%A7%E5%B0%8F/" title="修改IntellIJ IDE背景色和字体大小">修改IntellIJ IDE背景色和字体大小</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">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:"2023/01/10/Highcharts画收益概览/",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>
Reference in New Issue View Git Blame Copy Permalink