软件世界网 购物 网址 三丰软件 | 小说 美女秀 图库大全 游戏 笑话 | 下载 开发知识库 新闻 开发 图片素材
多播视频美女直播
↓电视,电影,美女直播,迅雷资源↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
移动开发 架构设计 编程语言 Web前端 互联网
开发杂谈 系统运维 研发管理 数据库 云计算 Android开发资料
  软件世界网 -> Web前端 -> Chart.js(图表绘制工具库)——HTML5 -> 正文阅读
Web前端 最新文章
10分钟
SSM框架SSM项目源码SSM源码下载java框架整合
javascript入门
JavaScript常用对象Array(2)
8.Smarty3:模版中的内置函数
表单脚本
iTextSharp5.0页眉页脚及Asp.net预览的实现
MVC基础学习—理论篇
JavaScript
http协议中get与post区别详解

[Web前端]Chart.js(图表绘制工具库)——HTML5

  2016-04-02 20:54:29

html部分:
<p><code class="hljs xml has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">canvas</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">id</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"myChart"</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">width</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"400"</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">height</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"400"</span>></span><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">canvas</span>></span></code></p>

  javascript部分:
  引入Chart.js文件;
  创建图表:实例化Chart对象(获取DOM节点取得2d context环境后实例化);
  实例化Chart对象后就继续创建具体类型的图表了;

曲线图(Line chart):


html:
<code class="hljs xml has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">canvas</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">id</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"myChart"</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">width</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"600"</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">height</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"400"</span>></span><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">canvas</span>></span></code>

javascript:(引入及两种使用方式)
<code class="hljs xml has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">script</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">src</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"js/Chart.min.js"</span>></span><span class="javascript" style="box-sizing: border-box;"></span><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">script</span>></span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul>
<code class="hljs xml has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">script</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">type</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"text/javascript"</span>></span><span class="javascript" style="box-sizing: border-box;">
    <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//方式一:</span>
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> ctx = document.getElementById(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"myChart"</span>).getContext(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"2d"</span>);;
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> MyNewChart = <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">new</span> Chart(ctx).Line(data); <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//这种方式是只加载数据集,(缺省options)不修改默认参数(简称法一)</span>

    <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//数据结构(数据参数设置)</span>
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> data = {
        <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//折线图需要为每个数据点设置一标签。这是显示在X轴上。</span>
        labels: [<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"January"</span>, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"February"</span>, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"March"</span>, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"April"</span>, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"May"</span>, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"June"</span>, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"July"</span>],
        <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//数据集(y轴数据范围随数据集合中的data中的最大或最小数据而动态改变的)</span>
        datasets: [{
                    fillColor: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"rgba(220,220,220,0.5)"</span>, <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//背景填充色</span>
                    strokeColor: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"rgba(220,220,220,1)"</span>, <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//路径颜色</span>
                    pointColor: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"rgba(220,220,220,1)"</span>, <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//数据点颜色</span>
                    pointStrokeColor: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"#fff"</span>, <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//数据点边框颜色</span>
                    data: [<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">10</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">59</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">90</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">81</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">56</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">55</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">40</span>] <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//对象数据</span>
                }, {
                    fillColor: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"rgba(151,187,205,0.5)"</span>,
                    strokeColor: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"rgba(151,187,205,1)"</span>,
                    pointColor: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"rgba(151,187,205,1)"</span>,
                    pointStrokeColor: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"#fff"</span>,
                    data: [<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">28</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">48</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">40</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">19</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">96</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">27</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">200</span>]
                }]
            };

</span><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">script</span>></span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li><li style="box-sizing: border-box; padding: 0px 5px;">23</li><li style="box-sizing: border-box; padding: 0px 5px;">24</li><li style="box-sizing: border-box; padding: 0px 5px;">25</li><li style="box-sizing: border-box; padding: 0px 5px;">26</li></ul>

数据结构:
<code class="hljs cs has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//数据结构(数据参数设置)</span>
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> data = {
        <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//折线图需要为每个数据点设置一标签。这是显示在X轴上。</span>
        labels: [<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"January"</span>, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"February"</span>, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"March"</span>, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"April"</span>, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"May"</span>, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"June"</span>, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"July"</span>],
        <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//数据集(y轴数据范围随数据集合中的data中的最大或最小数据而动态改变的)</span>
        datasets: [{
                    fillColor: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"rgba(220,220,220,0.5)"</span>, <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//背景填充色</span>
                    strokeColor: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"rgba(220,220,220,1)"</span>, <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//路径颜色</span>
                    pointColor: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"rgba(220,220,220,1)"</span>, <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//数据点颜色</span>
                    pointStrokeColor: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"#fff"</span>, <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//数据点边框颜色</span>
                    data: [<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">10</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">59</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">90</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">81</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">56</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">55</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">40</span>] <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//对象数据</span>
                }, {
                    fillColor: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"rgba(151,187,205,0.5)"</span>,
                    strokeColor: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"rgba(151,187,205,1)"</span>,
                    pointColor: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"rgba(151,187,205,1)"</span>,
                    pointStrokeColor: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"#fff"</span>,
                    data: [<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">28</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">48</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">40</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">19</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">96</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">27</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">200</span>]
                }]
            };
</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li></ul>

图标参数:
<code class="hljs cs has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"> Line.defaults = {
                <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//网格线是否在数据线的上面</span>
                scaleOverlay : <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">false</span>,

                <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//是否用硬编码重写y轴网格线</span>
                scaleOverride : <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">false</span>,

                <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//** Required if scaleOverride is true **</span>
                <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//y轴刻度的个数</span>
                scaleSteps : <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">null</span>,

                <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//y轴每个刻度的宽度</span>
                scaleStepWidth : <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">20</span>,

                <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// Y 轴的起始值</span>
                scaleStartValue : <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">null</span>,
                <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// Y/X轴的颜色</span>
                scaleLineColor: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"rgba(0,0,0,.1)"</span>,   
                <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// X,Y轴的宽度</span>
                scaleLineWidth: <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span>,
                <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 刻度是否显示标签, 即Y轴上是否显示文字</span>
                scaleShowLabels: <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">true</span>,
                <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// Y轴上的刻度,即文字</span>
                scaleLabel: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"<%=value%>"</span>,
                <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 字体</span>
                scaleFontFamily: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"'Arial'"</span>,
                <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 文字大小</span>
                scaleFontSize: <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">16</span>,
                <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 文字样式</span>
                scaleFontStyle: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"normal"</span>,
                <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 文字颜色</span>
                scaleFontColor: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"#666"</span>,
                <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 是否显示网格</span>
                scaleShowGridLines: <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">true</span>,
                <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 网格颜色</span>
                scaleGridLineColor: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"rgba(0,0,0,.05)"</span>,
                <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 网格宽度</span>
                scaleGridLineWidth:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">2</span>,
                <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 是否使用贝塞尔曲线? 即:线条是否弯曲</span>
                bezierCurve: <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">true</span>,
                <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 是否显示点数</span>
                pointDot: <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">true</span>,
                <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 圆点的大小</span>
                pointDotRadius:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">5</span>,
                <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 圆点的笔触宽度, 即:圆点外层白色大小</span>
                pointDotStrokeWidth: <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">2</span>,
                <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 数据集行程(连线路径)</span>
                datasetStroke: <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">true</span>,
                <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 线条的宽度, 即:数据集</span>
                datasetStrokeWidth: <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">2</span>,
                <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 是否填充数据集</span>
                datasetFill: <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">true</span>,
                <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 是否执行动画</span>
                animation: <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">true</span>,
                <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 动画的时间</span>
                animationSteps: <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">60</span>,
                <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 动画的特效</span>
                animationEasing: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"easeOutQuart"</span>,
                <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 动画完成时的执行函数</span>
                <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">/*onAnimationComplete: null*/</span>
            }</code>

上一篇文章      下一篇文章      查看所有文章
2016-04-02 20:54:21  
360图书馆 论文大全 母婴/育儿 软件开发资料 网页快照 文字转语音 购物精选 软件 美食菜谱 新闻中心 电影下载 小游戏 Chinese Culture
生肖星座解梦 人民的名义 人民的名义在线看 三沣玩客 拍拍 视频 开发 Android开发 站长 古典小说 网文精选 搜图网 天下美图
中国文化英文 多播视频 装修知识库
2017-4-30 15:01:30
多播视频美女直播
↓电视,电影,美女直播,迅雷资源↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  软件世界网 --