使用Chart.js创建图表

骑猪看日落 2023-10-05 14:11 7阅读 0赞

图表是为应用程序增加最大价值的元素或功能。具有以图形形式显示数据的功能，对于用户读取数据集的百分比非常有帮助。

使用图表有许多优点。包括能够使我们制作的应用看起来更专业。因为原本只是数字的数据看起来更直观。尤其是带有炫酷的动画和效果的图形，这些效果和效果使图形看起来更具吸引力。

但是可以肯定的是，对我们来说，*制图困难吗？*

答案是否定的，因为现在有很多可以帮助我们创建图形的javascript插件，尤其是由于每个图形插件都有其自身的优缺点。

如何在应用程序或网站上制作图形非常简单。在本教程中，我们将学习**如何使用chart.js创建图表**。

### 使用Chart.js创建图表 ###

刚听过chart.js的我们可能对chart.js是什么感到困惑。朋友，请参见以下有关chart.js的解释，以及如何轻松免费地使用chart.js制作图表。

[**Chart.js**][Chart.js]是一个javascript插件，其创建目的是为了使其更简单或帮助我们非常轻松，快速地创建图表。我们可以使用chart.js来选择多种图表类型。其中包括条形图，折线图，饼图等。

我们可以立即在chart.js网站（网址为[http://www.chartjs.org/samples/latest/）][http_www.chartjs.org_samples_latest]上查看我们可以使用chart.js创建的类型或图表模型的演示 。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FsbHdheTI_size_16_color_FFFFFF_t_70][]

使用chartjs创建图表

好的，让我们开始介绍如何使用chart.js创建图表

#### 如何使用Chart.js制作图表 ####

在本教程中，我们将使用chart.js创建几种类型的图表示例。

朋友，请立即从[https://github.com/chartjs/Chart.js/releases/tag/v2.7.2][https_github.com_chartjs_Chart.js_releases_tag_v2.7.2]下载chart.js 。在撰写本教程时，ChartJs的最新版本为v2.7.2。

我只是下载了chart.js一个。因为我认为我们还不需要其他软件包。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FsbHdheTI_size_16_color_FFFFFF_t_70 1][]

如何用chart.js制作图表

下载后，提取文件夹名称并将其重命名为**chartjs**。我们要重命名什么？因此，对于我们来说，连接项目变得更加容易。因此无需编写v2.7.2之类的版本。

在此示例中，我仅使用HTML，所以我只是在桌面上创建了项目。我在“图形”文件夹中创建了项目。

![20201122195202440.gif][]

如何在html或php上安装chartjs

接下来，在图形文件夹中创建一个名为**index.html**的新文件。

在这个index.html文件中，我将使用**chart.js****创建一个示例图表**。

**index.html**

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <div> 
      <span style="color:#000000;">1</span> 
     </div> 
     <div> 
      <span style="color:#000000;">2</span> 
     </div> 
     <div> 
      <span style="color:#000000;">3</span> 
     </div> 
     <div> 
      <span style="color:#000000;">4</span> 
     </div> 
     <div> 
      <span style="color:#000000;">5</span> 
     </div> 
     <div> 
      <span style="color:#000000;">6</span> 
     </div> 
     <div> 
      <span style="color:#000000;">7</span> 
     </div> 
     <div> 
      <span style="color:#000000;">8</span> 
     </div> 
     <div> 
      <span style="color:#000000;">9</span> 
     </div> 
     <div> 
      <span style="color:#000000;">10</span> 
     </div> 
     <div> 
      <span style="color:#000000;">11</span> 
     </div> 
     <div> 
      <span style="color:#000000;">12</span> 
     </div> 
     <div> 
      <span style="color:#000000;">13</span> 
     </div> 
     <div> 
      <span style="color:#000000;">14</span> 
     </div> 
     <div> 
      <span style="color:#000000;">15</span> 
     </div> 
     <div> 
      <span style="color:#000000;">16</span> 
     </div> 
     <div> 
      <span style="color:#000000;">17</span> 
     </div> 
     <div> 
      <span style="color:#000000;">18</span> 
     </div> 
     <div> 
      <span style="color:#000000;">19</span> 
     </div> 
     <div> 
      <span style="color:#000000;">20</span> 
     </div> 
     <div> 
      <span style="color:#000000;">21</span> 
     </div> 
     <div> 
      <span style="color:#000000;">22</span> 
     </div> 
     <div> 
      <span style="color:#000000;">23</span> 
     </div> 
     <div> 
      <span style="color:#000000;">24</span> 
     </div> 
     <div> 
      <span style="color:#000000;">25</span> 
     </div> 
     <div> 
      <span style="color:#000000;">26</span> 
     </div> 
     <div> 
      <span style="color:#000000;">27</span> 
     </div> 
     <div> 
      <span style="color:#000000;">28</span> 
     </div> 
     <div> 
      <span style="color:#000000;">29</span> 
     </div> 
     <div> 
      <span style="color:#000000;">30</span> 
     </div> 
     <div> 
      <span style="color:#000000;">31</span> 
     </div> 
     <div> 
      <span style="color:#000000;">32</span> 
     </div> 
     <div> 
      <span style="color:#000000;">33</span> 
     </div> 
     <div> 
      <span style="color:#000000;">34</span> 
     </div> 
     <div> 
      <span style="color:#000000;">35</span> 
     </div> 
     <div> 
      <span style="color:#000000;">36</span> 
     </div> 
     <div> 
      <span style="color:#000000;">37</span> 
     </div> 
     <div> 
      <span style="color:#000000;">38</span> 
     </div> 
     <div> 
      <span style="color:#000000;">39</span> 
     </div> 
     <div> 
      <span style="color:#000000;">40</span> 
     </div> 
     <div> 
      <span style="color:#000000;">41</span> 
     </div> 
     <div> 
      <span style="color:#000000;">42</span> 
     </div> 
     <div> 
      <span style="color:#000000;">43</span> 
     </div> 
     <div> 
      <span style="color:#000000;">44</span> 
     </div> 
     <div> 
      <span style="color:#000000;">45</span> 
     </div> 
     <div> 
      <span style="color:#000000;">46</span> 
     </div> 
     <div> 
      <span style="color:#000000;">47</span> 
     </div> 
     <div> 
      <span style="color:#000000;">48</span> 
     </div> 
     <div> 
      <span style="color:#000000;">49</span> 
     </div> 
     <div> 
      <span style="color:#000000;">50</span> 
     </div> 
     <div> 
      <span style="color:#000000;">51</span> 
     </div> 
     <div> 
      <span style="color:#000000;">52</span> 
     </div> 
     <div> 
      <span style="color:#000000;">53</span> 
     </div> 
     <div> 
      <span style="color:#000000;">54</span> 
     </div> 
     <div> 
      <span style="color:#000000;">55</span> 
     </div> 
     <div> 
      <span style="color:#000000;">56</span> 
     </div> 
     <div> 
      <span style="color:#000000;">57</span> 
     </div> 
     <div> 
      <span style="color:#000000;">58</span> 
     </div> 
     <div> 
      <span style="color:#000000;">59</span> 
     </div> 
     <div> 
      <span style="color:#000000;">60</span> 
     </div> 
     <div> 
      <span style="color:#000000;">61</span> 
     </div> 
     <div> 
      <span style="color:#000000;">62</span> 
     </div> 
     <div> 
      <span style="color:#000000;">63</span> 
     </div> 
    </div> </td> 
   <td> 
    <div> 
     <div> 
      <span style="color:#000000;">&lt;!DOCTYPE&nbsp;html&gt;</span> 
     </div> 
     <div> 
      <span style="color:#000000;">&lt;html&gt;</span> 
     </div> 
     <div> 
      <span style="color:#000000;">&lt;head&gt;</span> 
     </div> 
     <div> 
      <span style="color:#000000;">&lt;title&gt;Chart.js&lt;/title&gt;</span> 
     </div> 
     <div> 
      <span style="color:#000000;">&lt;script&nbsp;type="text/javascript"&nbsp;src="chartjs/Chart.js"&gt;&lt;/script&gt;</span> 
     </div> 
     <div> 
      <span style="color:#000000;">&lt;/head&gt;</span> 
     </div> 
     <div> 
      <span style="color:#000000;">&lt;body&gt;</span> 
     </div> 
     <div> 
      <span style="color:#000000;">&lt;style&nbsp;type="text/css"&gt;</span> 
     </div> 
     <div> 
      <span style="color:#000000;">body{ </span> 
     </div> 
     <div> 
      <span style="color:#000000;">font-family:&nbsp;roboto;</span> 
     </div> 
     <div> 
      <span style="color:#000000;">}</span> 
     </div> 
     <div> 
      <span style="color:#000000;">&lt;/style&gt;</span> 
     </div> 
     <div> 
      <span style="color:#000000;">&nbsp;</span> 
     </div> 
     <div> 
      <span style="color:#000000;">&lt;h2&gt;Tutorial Chart.js&lt;/h2&gt;</span> 
     </div> 
     <div> 
      <span style="color:#000000;">&nbsp;</span> 
     </div> 
     <div> 
      <span style="color:#000000;">&nbsp;</span> 
     </div> 
     <div> 
      <span style="color:#000000;">&nbsp;</span> 
     </div> 
     <div> 
      <span style="color:#000000;">&lt;div&nbsp;style="width: 500px;height: 500px"&gt;</span> 
     </div> 
     <div> 
      <span style="color:#000000;">&lt;canvas&nbsp;id="myChart"&gt;&lt;/canvas&gt;</span> 
     </div> 
     <div> 
      <span style="color:#000000;">&lt;/div&gt;</span> 
     </div> 
     <div> 
      <span style="color:#000000;">&nbsp;</span> 
     </div> 
     <div> 
      <span style="color:#000000;">&nbsp;</span> 
     </div> 
     <div> 
      <span style="color:#000000;">&lt;script&gt;</span> 
     </div> 
     <div> 
      <span style="color:#000000;">var&nbsp;ctx&nbsp;=&nbsp;document.getElementById("myChart").getContext('2d');</span> 
     </div> 
     <div> 
      <span style="color:#000000;">var&nbsp;myChart&nbsp;=&nbsp;new&nbsp;Chart(ctx,&nbsp;{ </span> 
     </div> 
     <div> 
      <span style="color:#000000;">type:&nbsp;'bar',</span> 
     </div> 
     <div> 
      <span style="color:#000000;">data:&nbsp;{ </span> 
     </div> 
     <div> 
      <span style="color:#000000;">labels:&nbsp;["Red",&nbsp;"Blue",&nbsp;"Yellow",&nbsp;"Green",&nbsp;"Purple",&nbsp;"Orange"],</span> 
     </div> 
     <div> 
      <span style="color:#000000;">datasets:&nbsp;[{ </span> 
     </div> 
     <div> 
      <span style="color:#000000;">label:&nbsp;'# of Votes',</span> 
     </div> 
     <div> 
      <span style="color:#000000;">data:&nbsp;[12,&nbsp;19,&nbsp;3,&nbsp;23,&nbsp;2,&nbsp;3],</span> 
     </div> 
     <div> 
      <span style="color:#000000;">backgroundColor:&nbsp;[</span> 
     </div> 
     <div> 
      <span style="color:#000000;">'rgba(255, 99, 132, 0.2)',</span> 
     </div> 
     <div> 
      <span style="color:#000000;">'rgba(54, 162, 235, 0.2)',</span> 
     </div> 
     <div> 
      <span style="color:#000000;">'rgba(255, 206, 86, 0.2)',</span> 
     </div> 
     <div> 
      <span style="color:#000000;">'rgba(75, 192, 192, 0.2)',</span> 
     </div> 
     <div> 
      <span style="color:#000000;">'rgba(153, 102, 255, 0.2)',</span> 
     </div> 
     <div> 
      <span style="color:#000000;">'rgba(255, 159, 64, 0.2)'</span> 
     </div> 
     <div> 
      <span style="color:#000000;">],</span> 
     </div> 
     <div> 
      <span style="color:#000000;">borderColor:&nbsp;[</span> 
     </div> 
     <div> 
      <span style="color:#000000;">'rgba(255,99,132,1)',</span> 
     </div> 
     <div> 
      <span style="color:#000000;">'rgba(54, 162, 235, 1)',</span> 
     </div> 
     <div> 
      <span style="color:#000000;">'rgba(255, 206, 86, 1)',</span> 
     </div> 
     <div> 
      <span style="color:#000000;">'rgba(75, 192, 192, 1)',</span> 
     </div> 
     <div> 
      <span style="color:#000000;">'rgba(153, 102, 255, 1)',</span> 
     </div> 
     <div> 
      <span style="color:#000000;">'rgba(255, 159, 64, 1)'</span> 
     </div> 
     <div> 
      <span style="color:#000000;">],</span> 
     </div> 
     <div> 
      <span style="color:#000000;">borderWidth:&nbsp;1</span> 
     </div> 
     <div> 
      <span style="color:#000000;">}]</span> 
     </div> 
     <div> 
      <span style="color:#000000;">},</span> 
     </div> 
     <div> 
      <span style="color:#000000;">options:&nbsp;{ </span> 
     </div> 
     <div> 
      <span style="color:#000000;">scales:&nbsp;{ </span> 
     </div> 
     <div> 
      <span style="color:#000000;">yAxes:&nbsp;[{ </span> 
     </div> 
     <div> 
      <span style="color:#000000;">ticks:&nbsp;{ </span> 
     </div> 
     <div> 
      <span style="color:#000000;">beginAtZero:true</span> 
     </div> 
     <div> 
      <span style="color:#000000;">}</span> 
     </div> 
     <div> 
      <span style="color:#000000;">}]</span> 
     </div> 
     <div> 
      <span style="color:#000000;">}</span> 
     </div> 
     <div> 
      <span style="color:#000000;">}</span> 
     </div> 
     <div> 
      <span style="color:#000000;">});</span> 
     </div> 
     <div> 
      <span style="color:#000000;">&lt;/script&gt;</span> 
     </div> 
     <div> 
      <span style="color:#000000;">&lt;/body&gt;</span> 
     </div> 
     <div> 
      <span style="color:#000000;">&lt;/html&gt;</span> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

我将在上面解释一些有关制作图形的语法。

首先，我们将其与我们先前下载的Chart.js文件连接。

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <div> 
      <span style="color:#000000;">1</span> 
     </div> 
    </div> </td> 
   <td> 
    <div> 
     <div> 
      <span style="color:#000000;">&lt;script&nbsp;type="text/javascript"&nbsp;src="chartjs/Chart.js"&gt;&lt;/script&gt;</span> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

接下来，我们创建一个<canvas> .. </ canvas>元素，并为其指定一个ID。在这里，我用“ myChart”来命名ID。

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <div> 
      <span style="color:#000000;">1</span> 
     </div> 
     <div> 
      <span style="color:#000000;">2</span> 
     </div> 
     <div> 
      <span style="color:#000000;">3</span> 
     </div> 
    </div> </td> 
   <td> 
    <div> 
     <div> 
      <span style="color:#000000;">&lt;div&nbsp;style="width: 500px;height: 500px"&gt;</span> 
     </div> 
     <div> 
      <span style="color:#000000;">&lt;canvas&nbsp;id="myChart"&gt;&lt;/canvas&gt;</span> 
     </div> 
     <div> 
      <span style="color:#000000;">&lt;/div&gt;</span> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

最后，在chart.js声明的一部分中，我们被指示在ID“ myChart”上制作图形“ 2d”。

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <div> 
      <span style="color:#000000;">1</span> 
     </div> 
    </div> </td> 
   <td> 
    <div> 
     <div> 
      <span style="color:#000000;">var&nbsp;ctx&nbsp;=&nbsp;document.getElementById("myChart").getContext('2d');</span> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

详细信息如下。

我们定义将要创建的图表类型的类型是图表类型“ bar”的类型。

对于所需的图形数据和颜色设置，还可以在以下*数据集中进行设置*。

对结果感兴趣吗？让我们运行上面创建的index.html文件。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FsbHdheTI_size_16_color_FFFFFF_t_70 2][]

正如我上面解释的，我们可以使用chart.js创建许多类型的图表。完整地，我们可以在[http://www.chartjs.org/samples/latest/上][http_www.chartjs.org_samples_latest]查看图形类型的演示。以及完整的文档，位于 [http://www.chartjs.org/docs/latest/][http_www.chartjs.org_docs_latest]。

因此，到目前为止，我们已经能够使用chart.js创建图表。

[Chart.js]: http://www.chartjs.org/
[http_www.chartjs.org_samples_latest]: http://www.chartjs.org/samples/latest/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FsbHdheTI_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20201122195332203.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FsbHdheTI=,size_16,color_FFFFFF,t_70
[https_github.com_chartjs_Chart.js_releases_tag_v2.7.2]: https://github.com/chartjs/Chart.js/releases/tag/v2.7.2
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FsbHdheTI_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20201122195225581.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FsbHdheTI=,size_16,color_FFFFFF,t_70
[20201122195202440.gif]: https://img-blog.csdnimg.cn/20201122195202440.gif
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FsbHdheTI_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20201122200121212.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FsbHdheTI=,size_16,color_FFFFFF,t_70
[http_www.chartjs.org_docs_latest]: http://www.chartjs.org/docs/latest/