怎样用JavaScript和HTML5 Canvas绘制图表

原文：https://code.tutsplus.com/zh-...
原作：John Negoita
翻译：Stypstive

在这篇教程中，我将展示用JavaScript和canvas作为手段，在饼状图和圆环图上显示数字信息。

与从零到一创建图表相比，其实有更简便的方式，例如用CodeCanyon上的这个图表库

但是如果你想知道库背后的原理，往下读。

什么是饼状图？

图表是用来图形化展示数据的工具。 饼状图将数据用切割成份的圆来展示。 每份的大小代表了数据值所代表的比例大小。

什么是圆环图？

简而言之，圆环图是饼状图的一个变种。 不同的是每份切向饼图的中心，这样只有轮缘是可见。 就这样，图表就如其名一个圆环。

开始用Canvas画

绘制饼图之前, 我们先看看它的组成部分。 我们先看看如何用canvas组件和JavaScript来画：

• 一条线

• 一个弧度（一个圆的部分）

• 一个颜色填充的图形

要想用HTML canvas画它，我们需要先创建几样东西：

创建一个项目文件夹，把它命名为piechart-tutorial
在piechart-tutorial文件夹中创建一个HTML文件index.html 这个文件中将是HTML代码。
一个JS文件scritp.js在piechart-tutorial文件夹中 这个文件中将是JavaScript代码。

我们将能简就简，然后添加一下代码到index.html中：

我们有一个ID为myCanvas的元素。 然后我们通过

然后在script.js中，我们添加创建图例元素的代码。 我们将代码添加在PieChart类中draw()函数的末尾。

...
        if (this.options.legend){
            color_index = 0;
            var legendHTML = "";
            for (categ in this.options.data){
                legendHTML += "
  "+categ+"
";
            }
            this.options.legend.innerHTML = legendHTML;
        }
...

代码通过传入options参数来寻找legend元素。 如果找到，就在其中填上带颜色的块和数据模型类别的名字。

同时，我们也需要将调用绘值图表的代码改成如下形式：

var myLegend = document.getElementById("myLegend");
 
var myDougnutChart = new Piechart(
    {
        canvas:myCanvas,
        data:myVinyls,
        colors:["#fde23e","#f16e23", "#57d9ff","#937e88"],
        legend:myLegend
    }
);
myDougnutChart.draw();

这就是结果的图表和图表图例：

恭喜

我们看到用HTML5 canvas绘制图表，其实也并不是那么困难。 它仅仅需要一点数学和JavaScript知识。 你现在有了要画一个你自己的饼形图和圆环图的全部。

如果你想要一个简便快捷的解决方案，用来创建饼形图和圆环图，同时还有其他类型的图表。你可以下载信息图表和HTML图表标签库或者WordPress插件对应的Charts and Graphs WordPress Visual Designer。

关于Envato艺云台

Envato艺云台是数据资产和创造性人才汇聚的全球领先市场平台。全球数百万人都选择通过我们的市场平台、工作室和课程来购买文件、选聘自由职业者，或者学习创建网站、制作视频、应用、制图等所需的技能。我们的子网站包括Envato艺云台Tuts+ 网络，全球最大的H5、PS、插图、代码和摄影教程资源库，以及Envato艺云台市场，其中的900多万类数字资产均通过以下七大平台进行销售 - CodeCanyon、ThemeForest、GraphicRiver、VideoHive、PhotoDune、AudioJungle和3DOcean。