 |
|
Step 2 : Why learn this Step 3 : chart.min.js Step 4 : html Step 5 : js code Step 6 : Complete code
As shown in the figure , This is a use chartjs A line diagram made . chartjs It is a front-end tool that can draw various charts ~
<script src="/study/js/chartjs/2.8.0/chart.min.js"></script> <div style="width:400px;margin:0px auto"> <canvas id="myChart" ></canvas> </div> <script> var ctx = document.getElementById('myChart').getContext('2d'); var myChart = new Chart(ctx, { type: 'line', data: { labels: [' red ', ' blue ', ' yellow ', ' green ', ' purple ', ' Orange '], datasets: [{ label: ' Example ', data: [12, 19, 3, 5, 2, 3], borderColor:'blue', borderWidth: 1, fill: false, }] }, options: { tooltips: { intersect: false, mode: 'index' } } }); </script>
Because what the webmaster is going to do springcloud The project will use this ... So let's learn first
First need char.min.js, I put it in Upper right corner chart.min.rar For everyone to download
In this case, I also provide online chart.min.js File ： <script src="http://inotgo.com/study/js/chartjs/2.8.0/chart.min.js"></script>
And then html code .
First prepare a width of 400px And centered div. Then put one in it <canvas> Element . canvas It means canvas , All kinds of charts are drawn on the basis of it . Finally, give this canvas One id: myChart, It is convenient for subsequent operation .
<div style="width:400px;margin:0px auto"> <canvas id="myChart" ></canvas> </div>
<div style="width:400px;margin:0px auto">
<canvas id="myChart" ></canvas>
</div>
1. Through dom Operation get myChart Of the object 2d Context ：
var ctx = document.getElementById('myChart').getContext('2d'); 2. be based on ctx Chart Object , And pass the following parameters 2.1 type: 'line' Indicates that this is a line chart . If you want a histogram , Modified into 'bar' Just 2.2 data: Provide data to display 2.2.1 labels Represents the text below the data ： ' red ', ' blue ', ' yellow ', ' green ', ' purple ', ' Orange ' 2.2.2 datasets Represents a data set . There is only one data in the data set , If it's multiple data , You'll see multiple lines on the chart , So there's only one line here . 2.2.2.1 label: The name of this set of data 2.2.2.2 data: Specific data 2.2.2.3 borderColor: line color 2.2.2.4 borderWidth: Line width 2.2.2.5 fill: false. No filling 2.3 options: Other options 2.3.1 tooltips Indicates the prompt message when the mouse moves to the icon . 2.3.1.1 intersect: false. Indicates that when the mouse is not placed on the data point , A prompt message will also be displayed . 2.3.1.2 model: 'index' Display mode
<script> var ctx = document.getElementById('myChart').getContext('2d'); var myChart = new Chart(ctx, { type: 'line', data: { labels: [' red ', ' blue ', ' yellow ', ' green ', ' purple ', ' Orange '], datasets: [{ label: ' Example ', data: [12, 19, 3, 5, 2, 3], borderColor:'blue', borderWidth: 1, fill: false, }] }, options: { tooltips: { intersect: false, mode: 'index' } } }); </script>
<script src="/study/js/chartjs/2.8.0/chart.min.js"></script> <div style="width:400px;margin:0px auto"> <canvas id="myChart" ></canvas> </div> <script> var ctx = document.getElementById('myChart').getContext('2d'); var myChart = new Chart(ctx, { type: 'line', data: { labels: [' red ', ' blue ', ' yellow ', ' green ', ' purple ', ' Orange '], datasets: [{ label: ' Example ', data: [12, 19, 3, 5, 2, 3], borderColor:'blue', borderWidth: 1, fill: false, }] }, options: { tooltips: { intersect: false, mode: 'index' } } }); </script>
The official account of programming , Follow and get the latest tutorials and promotions in real time , thank you .
Q & A area
2020-07-03
It looks so cool
The answer has been submitted successfully , Auditing . Please
My answer Check the answer record at , thank you
2019-11-06
How did you get this progress bar
The answer has been submitted successfully , Auditing . Please
My answer Check the answer record at , thank you
2019-06-13
forehead , If Echarts Just fine
2019-06-13
use jquery Why not? , Must use native dom Operation
Please... Before asking questions land
The question has been submitted successfully , Auditing . Please
My question Check the question record at , thank you
|
|||||||||||||||||
