Home Web Front-end JS Tutorial Bootstrap Chart component usage tutorial_javascript skills

Bootstrap Chart component usage tutorial_javascript skills

May 16, 2016 pm 03:03 PM

Bootstrap is a front-end toolkit developed by former Twitter designers Mark Otto and Jacob Thornton, which provides elegant HTML and CSS specifications. Bootstrap is not just a framework, but rather, it changes the rules of the game. The framework makes the design and development of many applications and websites much easier, and it popularizes a large number of HTML frameworks into products.

The chart component Chart.js is one of the easier-to-use components of Bootstrap. It is similar to highchart, a paid component. In terms of effect, there is still a little difference between free and paid products, but the functionality is almost the same. meet the needs of our project. The following JS script is mainly written to facilitate the configuration of a chart.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

/**

* 获取一个新的chart配置项

* @param color rgba颜色

* @param type 图表类型:line,bar,radar,polarArea,pie,doughnut

* @param title 显示图表的标题

* @param label 图表的标签,鼠标移到图表某个数据点时显示的提示文字

* @param categories 一般是X轴的内容

* @param data 一般是Y轴的数据

* @returns 返回图表的配置参数

*/

function getNewConfig(color,type,title,label,categories,data)

{

var background = color;

var config = {

type: type,

options: {

responsive: true,

legend: {

display: false,

position:'bottom'

},

hover: {

mode: 'label'

},

scales: {

xAxes: [{

display: true,

scaleLabel: {

display: false,

labelString: 'Month'

}

}],

yAxes: [{

display: true,

scaleLabel: {

display: false,

labelString: 'Value'

}

}]

},

title: {

display: true,

text: title

}

}

};

var dataset = {

label: label,

data: data,

fill: false,

borderDash: [, ],

borderColor : background,

backgroundColor : background,

pointBorderColor : background,

pointBackgroundColor : background,

pointBorderWidth :

};

var data = {

labels:categories,

datasets: [dataset]

};

config.data = data;

return config;

}

Copy after login

Call method:

1

2

3

4

5

6

var color = 'rgba(,,,.)';

var categories = ["--","--","--","--","--","--","--"];

var data = [,,,,,,];

var config = getNewConfig(color,'line','最近天微信会员增长情况','当天新增微信会员',categories,data);

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

var weixinMemberCountChart = new Chart(ctx, config);

Copy after login

Displayed effect:

Note: Chart needs to be referenced to use the above code .js,

Chart Chinese website and documentation:

http://www.bootcss.com/p/chart.js/

http://www.bootcss.com/p/chart.js/docs/

Chart English website and documentation:

www.chartjs.org

www.chartjs.org/docs


The above is the content of Bootstrap Chart component usage tutorial_javascript skills. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!


Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot Article Tags

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

How to introduce bootstrap into Eclipse How to introduce bootstrap into Eclipse Apr 05, 2024 am 02:30 AM

How to introduce bootstrap into Eclipse

How to introduce idea into bootstrap How to introduce idea into bootstrap Apr 05, 2024 am 02:33 AM

How to introduce idea into bootstrap

How to read the bootstrap mediation effect test results in stata How to read the bootstrap mediation effect test results in stata Apr 05, 2024 am 01:48 AM

How to read the bootstrap mediation effect test results in stata

750,000 rounds of one-on-one battle between large models, GPT-4 won the championship, and Llama 3 ranked fifth 750,000 rounds of one-on-one battle between large models, GPT-4 won the championship, and Llama 3 ranked fifth Apr 23, 2024 pm 03:28 PM

750,000 rounds of one-on-one battle between large models, GPT-4 won the championship, and Llama 3 ranked fifth

How to read the results of bootstrap mediation test How to read the results of bootstrap mediation test Apr 05, 2024 am 03:30 AM

How to read the results of bootstrap mediation test

How to use bootstrap to test mediation effects How to use bootstrap to test mediation effects Apr 05, 2024 am 03:57 AM

How to use bootstrap to test mediation effects

What is the difference between bootstrap and springboot What is the difference between bootstrap and springboot Apr 05, 2024 am 04:00 AM

What is the difference between bootstrap and springboot

How to export the results of bootstrap test mediation effect stata command How to export the results of bootstrap test mediation effect stata command Apr 05, 2024 am 03:39 AM

How to export the results of bootstrap test mediation effect stata command

See all articles