inotgo.com

Download area
File name File size
chart.min.rar 43k
Step 1 : What is it?   
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>


Source code
1. Double click the selected word 2. Triple Click to select the entire row 3. CTRL+F Find 4. F8 Full screen editing , Click restore again
Rendering Rendering complete
effect
Because what the webmaster is going to do springcloud The project will use this ... So let's learn first
 Why learn this
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>
Operation effect
<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>


Source code
1. Double click the selected word 2. Triple Click to select the entire row 3. CTRL+F Find 4. F8 Full screen editing , Click restore again
Rendering Rendering complete
effect


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
I will study hard

That's great







The answer has been submitted successfully , Auditing . Please My answer Check the answer record at , thank you
answer Or code please Fill in at least one , If you have a problem , Please ask again , Otherwise, the webmaster may not see




2019-11-06 How did you get this progress bar
Dayuan




The webmaster's progress bar looks good , How did you get this progress bar
 Loading
 
               
 
               


1 One answer

renshujia
Answer time :2019-12-11
Visually yes bootstrap



The answer has been submitted successfully , Auditing . Please My answer Check the answer record at , thank you
answer Or code please Fill in at least one , If you have a problem , Please ask again , Otherwise, the webmaster may not see





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
about Front end part -chartjs- Introduce Your questions

Try to provide Screenshot code and Abnormal information , Help to analyze and solve problems . You can also enter this station QQ Group communication : 496725845
Ask questions and try to provide complete code , Environment description , The more conducive to the recurrence of the problem , The faster your question can be answered .
Have questions about the code in the tutorial , Please provide which step , Which line is in doubt , This makes it easy to quickly locate the problem , Improve the speed at which questions are answered
In the thousands of questions that already exist , A considerable proportion , Because of the use of and webmaster Different versions of the development environment Resulting in , For example jdk, eclpise, idea, mysql,tomcat Wait, the version of the software is inconsistent .
Please use the same version as the webmaster , You can save yourself a lot of learning time . The webmaster sorted out the software versions used in teaching , It's all here , Convenient for everyone to download : /k/helloworld/helloworld-version/1718.html

Upload screenshot