hihgcharts使用

<div id="container" style="width:99%;height:400px" ></div>

<script>

Highcharts.theme = { colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4'],
chart: { backgroundColor: { linearGradient: { x1: 0, y1: 0, x2: 1, y2: 1 },
stops: [ [0, 'rgb(255, 255, 255)'], [1, 'rgb(240, 240, 255)'] ] },
borderWidth: 2, plotBackgroundColor: 'rgba(255, 255, 255, .9)', plotShadow: true, plotBorderWidth: 1 },
title: { style: { color: '#000', font: 'bold 16px "Trebuchet MS", Verdana, sans-serif' } },
subtitle: { style: { color: '#666666', font: 'bold 12px "Trebuchet MS", Verdana, sans-serif' } },
xAxis: { gridLineWidth: 1, lineColor: '#000', tickColor: '#000', labels: { style: { color: '#000', font: '11px Trebuchet MS, Verdana, sans-serif' } },
title: { style: { color: '#333', fontWeight: 'bold', fontSize: '12px', fontFamily: 'Trebuchet MS, Verdana, sans-serif' } } },
yAxis: { minorTickInterval: 'auto', lineColor: '#000', lineWidth: 1, tickWidth: 1, tickColor: '#000', labels: { style: { color: '#000', font: '11px Trebuchet MS, Verdana, sans-serif' } },
title: { style: { color: '#333', fontWeight: 'bold', fontSize: '12px', fontFamily: 'Trebuchet MS, Verdana, sans-serif' } } },
legend: { itemStyle: { font: '9pt Trebuchet MS, Verdana, sans-serif', color: 'black' },
itemHoverStyle: { color: '#039' }, itemHiddenStyle: { color: 'gray' } }, labels: { style: { color: '#99b' } }, navigation: { buttonOptions: { theme: { stroke: '#CCCCCC' } } } };
// Apply the theme
var highchartsOptions = Highcharts.setOptions(Highcharts.theme);
$("#container").show();
$("#showOld").hide();
function ShowPic(type){
//使用Ajax冲后台读取数据
var charDate = [];//[7, 6, 9, 14, 18, 21, 25, 26, 23, 18, 13, 9, 7, 6, 9, 14, 18, 21, 25, 26, 3, 18, 3, 9, 8, 6, 9, 14, 18, 21, 33];
$.ajax({
type: "POST",
url: "achieve.do?method=searchAchieveReByDay&type="+type,
error: function(request) {
$("#container").hide();
$("#minDiv").hide();
$("#showNew").hide();
$("#showOld").show();
},
success: function(msg){
var jsonNew = eval("(" + msg + ")");
$("#totalMonth").html(jsonNew.totalMony);
$("#totalWeek").html(jsonNew.totalWeek);
$("#totalDay").html(jsonNew.totalDay);
chartList = jsonNew.list;
if(jsonNew.result == 2){
$("#container").hide();
$("#minDiv").hide();
$("#showNew").hide();
$("#showOld").show();
}else{
var arr = new Array();
for (var i = 0; i < chartList.length; i++) {
arr.push(parseInt(chartList[i]));
}
charDate = arr;
showPic(charDate,type);
}
}
});
}
function showPic(charDate,type){
var textValue;
var dataValue;
if(type == "month"){
textValue = "今年每月安装量";
dataValue = ['1月', '2月', '3月', '4月', '5月', '6月','7月', '8月', '9月', '10月',
'11月', '12月'];
}else if(type == "week"){
textValue = "最新12周安装量";
dataValue = ['1周', '2周', '3周', '4周', '5周', '6周','7周', '8周', '9周', '10周',
'11周', '12周'];
}else{
textValue = "当月每天安装量";
dataValue = ['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号'];
}
$('#container').highcharts({
title: {
text: textValue,
x: -20 //center
},
subtitle: {
text: '',
x: -20
},
xAxis: {
tickInterval: 2,
categories: dataValue
},
yAxis: {
title: {
text: '安装个数(/个)'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
valueSuffix: '个'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
exporting: {
buttons: {
contextButton: {
menuItems: [{
text: '导出JPEG',
onclick: function () {
this.exportChart({
type: 'image/jpeg'
});
}
},
{
text: '导出PNG',
onclick: function () {
this.exportChart();
}
},
{
text: '导出PDF',
onclick: function () {
this.exportChart({
type: 'application/pdf'
});
}
}]
}
},
width: '800',
formAttributes: {"accept-charset":"utf-8"},
url: "http://export.highcharts.com/" //将此URL改成自己服务器请求URL即可
},
series: [{
name: '安装',
data: charDate
}]
});
}
window.οnlοad=function(){
var type = "day";
ShowPic(type);
showNotice();
}

</script>