软件世界网 购物 网址 三丰软件 | 小说 美女秀 图库大全 游戏 笑话 | 下载 开发知识库 新闻 开发 图片素材
多播视频美女直播
↓电视,电影,美女直播,迅雷资源↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
移动开发 架构设计 编程语言 Web前端 互联网
开发杂谈 系统运维 研发管理 数据库 云计算 Android开发资料
  软件世界网 -> Web前端 -> Chart.js(图表绘制工具库)——HTML5 -> 正文阅读

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


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  
Web前端 最新文章
10分钟
SSM框架SSM项目源码SSM源码下载java框架整合
javascript入门
JavaScript常用对象Array(2)
8.Smarty3:模版中的内置函数
表单脚本
iTextSharp5.0页眉页脚及Asp.net预览的实现
MVC基础学习—理论篇
JavaScript
http协议中get与post区别详解
360图书馆 软件开发资料 文字转语音 购物精选 软件下载 美食菜谱 新闻资讯 电影视频 小游戏 Chinese Culture
生肖星座 三丰软件 视频 开发 Android开发 站长 古典小说 网文精选 搜图网 美图 中国文化英文版 多播 租车 短信
2017-7-26 10:42:34
多播视频美女直播
↓电视,电影,美女直播,迅雷资源↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  软件世界网 --