Chart.js（图表绘制工具库）——HTML5

Posted 2022-12-08 zealifree005

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>