Chart.js(グラフ作成ツールライブラリ)——HTML 5

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ノード取得2 d 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:(導入と2つの使用方法)

<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>