用Chart.js 2.7 创建柱状图|Create Bar Chart with Chart.js 2.7

in #utopian-io7 years ago (edited)

Summary:
Chart.js provides simple yet flexible javascript charting for designers & developers. It has become one of the most popular open source charting libraries and i will show you how to create a bar chart with chartjs today.I choose the total and per capita GDP in the top 10 economies of the world in 2017 as the original data. I use the newest version of Chart.js which is different from the older ones.

Free-Converter.com-chartjs-logo-59034717.png

Chart.js为设计师和开发者提供简单而灵活的javascript图表设计,它已经成为了最受欢迎的开源图表库之一,今天教程将教大家如何使用Chart.js去绘制一张柱状图。我选取的原始数据是2017年世界前10大经济体的GDP总量和人均GDP数据。采用的Chart.js版本是和以前的版本不太一样的最新的2.7.1版本。

兼容浏览器:一切支持canvas的浏览器,IE9,Chrome,Firefox等等
Chart.js版本: 2.7.1(最新版本)

您能从本教程学到什么?

  • 代码整体结构
  • 怎样调用Chart.js
  • chartjs的容器
  • 怎样创建chart对象
  • 柱状图的数据结构
  • 柱状图的参数选项
  • 生成并渲染对象

准备条件

  • 一个代码编辑器,如WebStorm和atom
  • 一个可供调试的浏览器:IE, Chrome或是Firefox

难度

  • 中等

教程内容

由于HighChart.js的崛起,开源的数据图形库普遍重构了代码,Chart.js在2.0之后就和1.0完全不一样,我们就看看最新版本的Chart.js怎样创建线形图。

代码整体结构
<script src="path/to/Chartjs"></script>
<canvas id="myChart" width="600" height="400"></canvas>
<script>
var data = {}
Line.defaults = {}
var ctx = document.getElementById("myChart").getContext("2d");
var chart = new Chart(ctx, {
    type:{},
    data:{},
    options:{}
});
</script>
原始数据

本教程的原始数据选择2017年世界前10大经济体的GDP总量和人均GDP数据。

国家GDP总量(亿美元)人均GDP(美元)
美国186979.2257765.512
中国122539.758865.999
日本41706.4333010.024
德国34725.0742388.679
英国30548.446719.862
法国24788.4838575.438
印度23847.261820.8
意大利18675.7230540.566
巴西16728.688117.645
加拿大15928.4844095.85
要点1:怎样调用Chart.js

本地路径调用

<script src="path/to/Chartjs"></script>

CDN调用

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.js"></script>

可以使用以上两种方式引入Chart.js

要点2:chartjs的容器

Chartjs不同于HighCharts.js,HighCharts.js基于的是SVG,而Chart.js基于的是canvas,所以chartjs的容器仅需一个canvas元素即可。

<canvas id="myChart" width="600" height="400"></canvas>
要点3:怎样创建chart对象

获取canvas元素有两种方式,一种方式是使用javascript原生的getElementById的方式

var ctx = document.getElementById("myChart").getContext("2d");

另一种方式是用jQuery获取canvas的context。首先从jQuery集合中获取我们需要的DOM节点,然后在这个DOM节点上调用 getContext("2d") 方法。

<script src="https://code.jquery.com/jquery.min.js"></script>
var ctx = $("#myChart").get(0).getContext("2d");

获取canvas元素后,需要在指定canvas元素上实例化Chart对象。

var chart = new Chart(ctx, {
    type: 'bar',
        data: data,
        options: options
    });
要点4:曲线图的数据结构
var data = {
    labels : ["美国","中国","日本","德国","英国","法国","印度","意大利","加拿大"],
    datasets : [
        {
            label: "人均GDP",
            backgroundColor : "rgba(151,187,205,0.5)",
            borderColor : "rgba(151,187,205,1)",
            data : [57765.512,8865.999,33010.024,42388.679,46719.862,38575.438,1820.8,30540.566,8117.645,44095.85]
        },
        {
            label: "GDP总量",
            backgroundColor : "rgba(220,220,220,0.5)",
            borderColor : "rgba(220,220,220,1)",
            data : [186979.22,122539.75,41706.43,34725.07,30548.4,24788.48,23847.26,18675.72,16728.68,15928.48]
        }
    ]
};

其中labels代表的即是横坐标的标签,本数据中就是国家的名称。而datasets则是具体的数据的值,其中每个dataset就是一个系列的bar。
在某个dataset的具体定义中,backgroundColor指的是填充区域的颜色,borderColor指的是柱状图边线的颜色。
dataset还有许多参数选项,这里不一一列出。

要点5:曲线图的参数选项
var options = {
            responsive: false,
            title: {
            display: true,
            text: '世界前10大经济体GDP总量及人均GDP数据'
        }
    };

responsive就是是否响应式设计,如为true,则canvas的width和height自动不生效,随浏览器变化。
title就是图表的标题的意思,其中display就表示标题是否展现,text就是标题的内容。
options还有许多参数选项,这里不一一列出。

最终:生成并渲染对象

Peek 2018-01-25 15-59.gif

相关教程



Posted on Utopian.io - Rewarding Open Source Contributors

Sort:  

Your contribution cannot be approved because it does not follow the Utopian Rules.

  • there are too many charts tutorials and they do not provide value to the community.
    You can contact us on Discord.
    [utopian-moderator]