做项目的时候有个模块的图表用到了highcharts展示，所以自己简单整理弄了一下页面的展示，不涉及后台；
参考用到的地址：https://www.highcharts.com/demo，这个是我参考的网址，挺好用的，里边的例子也很简单易懂。
在自己的页面中添加了一些简单的小备注，很容易看懂，
但是发现有的浏览器打开页面有点兼容问题，大部分还是好使的哈～，欢迎大神提出比如IE怎么解决兼容问题哈！
页面添加一个div，用来展示图表的地方
<div id="container1" style="width:500px;height:400px;"></div>
在<script type="text/javascript"> </script>中添加下面的内容
1、柱状图：
Highcharts.chart('container1', {
chart: {
type: 'column'
},
title: {
text: '标题'
},
subtitle: {
text: '小标题'
},
xAxis: {//x轴数据
categories: ['Jan','Feb','Mar','Apr','May'],
crosshair: true
},
yAxis: {
min: 0,
title: {
text: 'Y轴标题'
}
},
tooltip: {//根据series的数量动态添加的提示信息
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{//Y轴数据
name: 'A',
data: [49.9, 71.5, 106.4, 129.2, 144.0]
}, {
name: 'B',
data: [83.6, 78.8, 98.5, 93.4, 106.0]
}]
});
2、柱状+折线+双Y轴：
Highcharts.chart('container2', {
title: {
text: '标题'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Bananas', 'Plums']
},
yAxis: {
title: {
text: 'Y轴标题'
}
},
labels: {
items: [
{
html: '小提示1',
style: {//提示样式
left: '55px',
top: '25px',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'black'
}
},{
html: '小提示2',
style: {
left: '610px',
top: '25px',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'black'
}
}
]
},
series: [
{//柱状图1
type: 'column',
name: '柱状图1',
data: [3, 2, 1, 3, 4]
}, {//柱状图2
type: 'column',
name: '柱状图2',
data: [2, 3, 5, 7, 6]
}, {//折线图1
type: 'spline',
name: '折线图1',
data: [10, 20, 30, 30, 10],
marker: {
lineWidth: 2,
lineColor: Highcharts.getOptions().colors[3],
fillColor: 'white'//折线图点的颜色
}
}, {//折线图2
type: 'spline',
name: '折线图2',
data: [5, 10, 15, 15, 5],
marker: {
lineWidth: 2,
lineColor: Highcharts.getOptions().colors[3],
fillColor: 'white'//折线图点的颜色
}
}, {//饼图1
type: 'pie',
name: '饼图1数据名称',
data: [{
name: 'Jane',
y: 13,
color: Highcharts.getOptions().colors[0] // Jane's color
}, {
name: 'John',
y: 23,
color: Highcharts.getOptions().colors[1] // John's color
}, {
name: 'Joe',
y: 19,
color: Highcharts.getOptions().colors[2] // Joe's color
}],
center: [100, 80],//饼图位置
size: 100,//饼图大小
showInLegend: false,
dataLabels: {
enabled: false
}
}, {//饼图2
type: 'pie',
name: '饼图2数据名称',
data: [{
name: 'A',
y: 13,
color: Highcharts.getOptions().colors[3] // Jane's color
}, {
name: 'B',
y: 23,
color: Highcharts.getOptions().colors[4] // John's color
}, {
name: 'C',
y: 19,
color: Highcharts.getOptions().colors[5] // Joe's color
}],
center: [650, 80],//饼图位置
size: 80,//饼图大小
showInLegend: false,
dataLabels: {
enabled: false
}
}]
});
3、柱状图+饼图+折线图：
Highcharts.chart('container3', {
chart: {
zoomType: 'xy'
},
title: {
text: '标题'
},
subtitle: {
text: '小标题'
},
xAxis: [{
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
crosshair: true
}],
yAxis: [{ // Primary yAxis
labels: {
format: '{value}°C',
style: {
color: Highcharts.getOptions().colors[0]
}
},
title: {
text: '温度',
style: {
color: Highcharts.getOptions().colors[0]
}
}
}, { // Secondary yAxis
title: {
text: '降水量',
style: {
color: Highcharts.getOptions().colors[1]
}
},
labels: {
format: '{value} mm',
style: {
color: Highcharts.getOptions().colors[1]
}
},
opposite: true
}, { // Thired yAxis
title: {
text: '天数',
style: {
color: Highcharts.getOptions().colors[2]
}
},
labels: {
format: '{value} 天',
style: {
color: Highcharts.getOptions().colors[2]
}
},
opposite: true
}],
tooltip: {
shared: true
},
legend: {//图例，动态跟随Y轴
layout: 'vertical',
align: 'left',
x: 120,
verticalAlign: 'top',
y: 100,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
},
series: [{
name: 'Y轴数据温度',
type: 'column',
data: [7.0, 6.9, 9.5, 10.5, 10.2],
tooltip: {
valueSuffix: '°C'
}
}, {
name: 'Y轴数据降水量',
type: 'spline',
yAxis: 1,
data: [49.9, 71.5, 106.4, 129.2, 144.0],
tooltip: {
valueSuffix: ' mm'
}
}, {
name: 'Y轴数据天数',
type: '',
yAxis: 2,
data: [1, 2, 3, 4, 5],
tooltip: {
valueSuffix: '天'
}
}]
});
4、百分比饼图：
Highcharts.chart('container4', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: '标题'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
}
}
},
series: [{
name: 'Brands',
colorByPoint: true,
data: [{
name: 'IE',
y: 56.33
}, {
name: 'Chrome',
y: 24.03,
sliced: true,
selected: true
}, {
name: 'Firefox',
y: 10.38
}, {
name: 'Safari',
y: 4.77
}, {
name: 'Opera',
y: 0.91
}, {
name: 'Other',
y: 0.2
}]
}]
});
5、面积图：
Highcharts.chart('container5', {
chart: {
type: 'area'
},
title: {
text: '标题'
},
subtitle: {
text: '小标题'
},
xAxis: {
allowDecimals: false,
labels: {
formatter: function () {
return this.value; // clean, unformatted number for year
}
}
},
yAxis: {
title: {
text: 'Y轴标题'
},
labels: {
formatter: function () {// Y轴精度
return this.value / 1000 + 'k';
}
}
},
tooltip: {//提示
//{point.x}---X轴值
//{point.y:,.0f}---Y轴值
//{series.name}---图例名称
pointFormat: '{series.name}，{point.x}年面积为 <b>{point.y:,.0f}</b>'
},
plotOptions: {
area: {
pointStart: 1940,//X轴起点值
marker: {
enabled: false,
symbol: 'circle',
radius: 2,//鼠标经过标点的大小
states: {
hover: {
enabled: true
}
}
}
}
},
series: [{
name: '美国',//图例名称
data: [null, null, null, null, null, 6, 11, 32, 110, 235, 369, 640,
1005, 1436, 2063, 3057, 4618, 6444, 9822, 15468, 20434, 24126,
27387, 29459, 31056, 31982, 32040, 31233, 29224, 27342, 26662,
26956, 27912, 28999, 28965, 27826, 25579, 25722, 24826, 24605,
24304, 23464, 23708, 24099, 24357, 24237, 24401, 24344, 23586,
22380, 21004, 17287, 14747, 13076, 12555, 12144, 11009, 10950,
10871, 10824, 10577, 10527, 10475, 10421, 10358, 10295, 10104]
}, {
name: '德国',
data: [null, null, null, null, null, null, null, null, null, null,
5, 25, 50, 120, 150, 200, 426, 660, 869, 1060, 1605, 2471, 3322,
4238, 5221, 6129, 7089, 8339, 9399, 10538, 11643, 13092, 14478,
15915, 17385, 19055, 21205, 23044, 25393, 27935, 30062, 32049,
33952, 35804, 37431, 39197, 45000, 43000, 41000, 39000, 37000,
35000, 33000, 31000, 29000, 27000, 25000, 24000, 23000, 22000,
21000, 20000, 19000, 18000, 18000, 17000, 16000]
}]
});
6、文字分布图：（这个目前我还没有用到过，类似一个简单的文字展示特效，看着挺好玩的）
var text = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean bibendum erat ac justo sollicitudin, quis lacinia ligula fringilla. Pellentesque hendrerit, nisi vitae posuere condimentum, lectus urna accumsan libero, rutrum commodo mi lacus pretium erat. Phasellus pretium ultrices mi sed semper. Praesent ut tristique magna. Donec nisl tellus, sagittis ut tempus sit amet, consectetur eget erat. Sed ornare gravida lacinia. Curabitur iaculis metus purus, eget pretium est laoreet ut. Quisque tristique augue ac eros malesuada, vitae facilisis mauris sollicitudin. Mauris ac molestie nulla, vitae facilisis quam. Curabitur placerat ornare sem, in mattis purus posuere eget. Praesent non condimentum odio. Nunc aliquet, odio nec auctor congue, sapien justo dictum massa, nec fermentum massa sapien non tellus. Praesent luctus eros et nunc pretium hendrerit. In consequat et eros nec interdum. Ut neque dui, maximus id elit ac, consequat pretium tellus. Nullam vel accumsan lorem.';
var lines = text.split(/[,\. ]+/g),
data = Highcharts.reduce(lines, function (arr, word) {
var obj = Highcharts.find(arr, function (obj) {
return obj.name === word;
});
if (obj) {
obj.weight += 1;
} else {
obj = {
name: word,
weight: 1
};
arr.push(obj);
}
return arr;
}, []);
Highcharts.chart('container6', {
series: [{
type: 'wordcloud',
data: data,
name: 'Occurrences'
}],
title: {
text: '文字图'
}
});
65
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
