未加星标

How to Create a Line Chart With Chart.js

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二04 | 时间 2017 | 作者 红领巾 ] 0人收藏点击收藏

How to Create a Line Chart With Chart.js
What You'll Be Creating

In this video tutorial from my course on Data Design With Chart.js , you’re going to create a simple line chart by using the Chart.js framework to plot out a series of points on a grid. With that done, we’ll watch the Chart.js framework do the rest of the heavy lifting for you.

You can find the source code here:

Starting Pen Finished Pen How to Create a Line Chart With Chart.js Set Up the Canvas

Start by opening the starting CodePen for this tutorial and clicking on the Fork button to create a new copy of it. That'll take us to a new URL, where we have our own fresh copy that has the same settings applied toit.

When we're creating a chart using the Chart.js framework, we're going to need a canvas element. The Chart JS library relies on canvas elements. So create a canvas element in the HTML section, give it an ID of line-chart , and then close off that canvas element.

<canvas id="line-chart"></canvas>

We're not going to worry about styling or sizing that canvas element, because even if we try to size it using CSS or using attributes on the HTML element itself, it's not going to work. The way that Chart.js works, it's just going to resize that canvas to the size of its parent, so it's still going to take up the whole screen anyway. Later on we'll take a look at how to get around that, but for now let's just jump into our javascript and create the chart itself.

Create the Context Using JavaScript

The first thing we need in the JavaScript is the context of our chart, which is basically just a fancy way of saying the element that we're going to apply the chart to, which is our canvas object.

So we're going to create a variable called context, or ctx for short, and we'll set this equal to that canvas object. And we're going to point to that canvas object using jQuery. So I'm gonna use the dollar sign and parentheses, and inside the parentheses, we'll have a set of quotation marks, and inside the quotation marks, we'll use the CSS selector for that canvas object. And we're pointing to that object's ID, so we're going to type # and then the ID, which is line-chart , and then add a semi-colon at the end of that statement.

var ctx = $("#line-chart"); Add the JavaScript Code to Plot the Chart

Now that we've done that, we just need one more line of code to create our chart. Now it's going to be a complex line of code, and it's actually going to end up looking like multiple lines, but it's just going to be one JavaScript statement. Here it is:


How to Create a Line Chart With Chart.js

Now let me walk you through that step by step and explain what's happening.

We start by creating a variable called lineChart , and using the Chart.js syntax, we set this equal to a new Chart .

We add open and closed parentheses, and inside those parentheses we need two things:

The object that we are applying this chart to, or the context which we have created and stored in a variable called ctx . An object that contains all of our data and styles for this particular chart.

We can think of this second object as a set of property value pairs. And the first property we need is going to specify what type of chart this is. And that property name is type . And then we add 'line' , and that tells Chart.js that this is a line chart that we're creating.

And then we'll type a comma, and go down to the next line. And then the next thing we need is all the data that's going to go into that chart. So we'll type in the word data . And then this data property is going to be an object. So we're gonna to use curly brackets to create that object, and inside this object we're going to have a number of other property value pairs.

Inside this new object, we need a couple of things.

The first thing we need is all of the labels that are going to go along the bottom of our chart. So let's say that we want a chart that's mapping out the prices of a product over the course of a year or maybe the stock prices of a particular stock for the course of a year. So for our labels, we're going to have every individual month of the year.

The next thing we need is an array of data sets. You can have multiple data sets for a single chart, but we're just going to worry about one data set for now. So the name of this property is datasets , and this is going to be an array of objects.

When we create the array using square brackets, we can see the chart has already showed up.


How to Create a Line Chart With Chart.js

We don't have any data on that chart yet, so it doesn't know how to scale all the numbers on the left side of the chart, but once we start plugging in some values, the look of that is going to change.

You really need to pay attention to what you're doing when adding the values. We need to make sure that our datasets element starts with an array, and inside that array, it has an object.

Inside that object, we're going to have first a label for the year, 2015 . And then the only other thing we'll have here is our list of values, which is contained in another attribute called data . These are basically just 12 random numbers for this example.

Watch Chart.js Plot the Chart

Once we paste in those numbers, we'll see that our chart comes to life.


How to Create a Line Chart With Chart.js

So now we see that, first of all, our left axis has changed to match the data that we've entered. We can also see a single data set over the course of one year, and the label that we added for 2015 is up at the top.

So that's how you create a simple line chart using Chart.js.

Watch the Full Course

Data design (or “data visualization”) is the art of displaying information in a way that is easy to consume and easy to understand. In the full course, Data Design With Chart.js , you'll learn how to use Chart.js for dynamically displaying data with interactive and eye-catching charts.

You'll take this initial line chart much further, for example by applying different styles and adding multiple data sets. Then you'll learn how to create bar charts, pie charts, and even animated charts.

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

主题: JavaJavaScriptHTMLCSSjQuery
分页:12
转载请注明
本文标题:How to Create a Line Chart With Chart.js
本站链接:http://www.codesec.net/view/530855.html
分享请点击:


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(63)