<p><code></p> <h2 id="articleHeader0">介绍</h2> <p>sChart.js 作为一个小型简单的图表库,没有过多的图表类型,只包含了柱状图、折线图、饼状图和环形图四种基本的图表。麻雀虽小,五脏俱全。sChart.js 基本可以满足这四种图表的需求。而它的小,体现在它的体积上,代码只有 8kb,如果经过服务器的Gzip压缩,那就更小了,因此不用担心造成项目代码冗余。</p> <p>该库使用 canvas 实现,兼容 IE9 以上浏览器。</p> <ul> <li> <p>仓库地址:<a href="https://github.com/lin-xin/sChart.js" rel="nofollow noreferrer" target="_blank">sChart.js</a></p> </li> <li> <p>文档(中英文):<a href="http://open.omwteam.com/sChart" rel="nofollow noreferrer" target="_blank">http://open.omwteam.com/sChart</a></p> </li> <li> <p>演示地址:<a href="http://open.omwteam.com/sChart/demo.html" rel="nofollow noreferrer" target="_blank">http://open.omwteam.com/sChart/demo.html</a></p> </li> </ul> <p><span class="img-wrap"><img data-src="/img/remote/1460000009816960?w=500&amp;h=400" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="demo" title="demo" style="cursor: pointer;"></span></p> <h2 id="articleHeader1">使用指南</h2> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="$ npm install schart.js import sChart from 'schart.js'" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs sql"><code>$ npm <span class="hljs-keyword">install</span> schart.js <span class="hljs-keyword">import</span> sChart <span class="hljs-keyword">from</span> <span class="hljs-string">'schart.js'</span></code></pre> <p>也可以直接插入script到你的<a href="http://www.js-code.com/tag/html" title="HTML" target="_blank">HTML</a>页面:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<script src=&quot;http://open.omwteam.com/sChart/static/js/sChart.min.js&quot;></script>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="xml hljs"><code class="html" style="word-break: break-word; white-space: initial;"><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"http://open.omwteam.com/sChart/static/js/sChart.min.js"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre> <p>使用简单:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="new sChart(canvasId, type, data, options);" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="js" style="word-break: break-word; white-space: initial;"><span class="hljs-keyword">new</span> sChart(canvasId, type, data, options);</code></pre> <p>即可生成一个图表。</p> <p>canvasId:canvas标签的id,必填。</p> <p>type:图表类型,必填。</p> <p>options:图表配置参数,可选,具体参考<a href="http://open.omwteam.com/sChart/index.html" rel="nofollow noreferrer" target="_blank">文档</a>。</p> <p>data:要生成图表的数据,格式为:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="data:[ {name: 'xx', value: 'yy'} ]" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="js">data:[ {<span class="hljs-attr">name</span>: <span class="hljs-string">'xx'</span>, <span class="hljs-attr">value</span>: <span class="hljs-string">'yy'</span>} ]</code></pre> <p>name则为坐标值,value则为柱状数据值。</p> <p>其他类型的图表data格式都相同,可以同个数据生成不同图表。</p> <h2 id="articleHeader2">vue相关</h2> <p>vue-schart:是用vue.js封装了 sChart.js 的一个库。方便在vue的项目中使用。</p> <p>仓库地址:<a href="https://github.com/lin-xin/vue-schart" rel="nofollow noreferrer" target="_blank">https://github.com/lin-xin/vue-schart</a></p> <p>在项目中使用了 vue-schart 的有:<a href="https://github.com/lin-xin/vue-manage-system" rel="nofollow noreferrer" target="_blank">vue-manage-system</a></p> <h2 id="articleHeader3">总结</h2> <p>当然,现在有很多成熟的图表库,Chart.js、echarts等等,有着丰富的图表和炫酷的效果。这个库当然不足以与它们相媲美。</p> <p>但是很多时候我的项目追求的是小,我并不需要用到那么多的功能,我只想展示一下就OK。那它们也可以按需引用,是吧?</p> <p>所以我觉得,适合自己项目的,才是最好的!</p> <h3 id="articleHeader4">更多文章:<a href="https://github.com/lin-xin/blog/" rel="nofollow noreferrer" target="_blank">lin-xin/blog</a><br /> </h3> <h3 id="articleHeader5">微信赞赏</h3> <p><span class="img-wrap"><img data-src="/img/remote/1460000009357413?w=236&amp;h=236" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="谢谢支持" title="谢谢支持" style="cursor: pointer;"></span></p> <p></code></p>

本文固定链接: http://www.js-code.com/vue-js/vue-js_26953.html