|
参考了一些： http://www.stepday.com/topic/?740
最终自已的例子，e.g.
//设置统计图形的宽度
var screenWidth = $("body").width();
$(".highchartImg").each(function(){
$(this).width(screenWidth*0.555);
});
<div id="tabmofn_1" class="tagContent">
<div id="fileNumber_column" class="highchartImg" style="height: 300px; margin: 0 auto"></div>
</div>
drawLineOrColumnGraphic("fileNumber_column","column",true,xaxis_line,series_line);
/**
* 绘制线图或者是Column图
* @param {} container 图形日期的id
* @param {} type 图形的类别 "line"或者"column"
*/
function drawLineOrColumnGraphic(container,type,legendEnable,xaxis,series){
var step = xaxis.length>10?parseInt(xaxis.length/9):1;
chart = new Highcharts.Chart({
chart: {
renderTo: container,
defaultSeriesType: type
},
backgroundColor: {
linearGradient: [0, 0, 500, 500],
stops: [
[0, 'rgb(255, 0, 0)'],
[1, 'rgb(200, 0, 0)']
]
},
credits: {
enabled: false
},
title: {
text: "",
x: -20 //center
},
plotOptions: {
series: {
cursor: 'pointer',
events: {
click: function(event) {
if("fn"==stasticType_total && event.point.y>0){
var category = "";
var rule = "";
for(var i=0;i<cNameList_fn.length;i++){
if(cNameList_fn[i]==this.name){
category = cRefList_fn[i];
break;
}
}
for(var i=0;i<rNameList_fn.length;i++){
if(rNameList_fn[i]==this.name){
rule = rRefList_fn[i];
break;
}
}
var parameters = {};
var dateRange = event.point.category;
var sDate;
var eDate;
if(dateRange.split("-").length==1){
sDate = "20"+dateRange;
eDate = "20"+dateRange;
}else{
sDate = "20"+dateRange.split("-")[0];
eDate = "20"+dateRange.split("-")[1];
}
parameters.modifiedDateStart = new Date(Date.parse(sDate)).getTime();
parameters.modifiedDateEnd = new Date(Date.parse(eDate)).getTime()+24*60*60*1000;
parameters.category = category;
parameters.rule = rule;
parameters.classifier = classifier_fn;
parameters.website = siteList_fn;
//parameters.content = queryContent_fn;
showStasticDetail(parameters);
}
/*else if("kt"==stasticType_total && event.point.y>0){
showKeywordStatisticDetail(event.point.category, event.point.series.name);
}*/
}
}
}
},
xAxis: {
gridLineWidth : 1,
tickWidth : 5,
labels: {
enabled: true,
rotation: 15,
align: 'left',
style: {
fontSize :'12px'
},
step:step
},
categories: xaxis
},
yAxis: {
title: {
text:""
},
allowDecimals : false,
min: 0,
lineWidth : 1,
startOnTick: true,
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter : function() {
var tempDateStr = $(this.x).text();
if(tempDateStr === null || tempDateStr === ''){
tempDateStr = this.x;
}
return '<b>'+ this.series.name +'</b>：'+ this.y +$.language.getText('TOPIC_AT_TIME_COUNT_UNIT_TEXT')+'<br><b>'+ $.language.getText('REPORT_TABLE_DATE') +'</b>：' +tempDateStr;
}
},
legend: {
enabled : legendEnable,
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
borderColor : '#909090',
x: -10,
y: 50,
borderWidth: 0,
labelFormatter: function() {
var total = 0;
for(var i=this.yData.length; i--;) { total += this.yData[i]; };
if(this.name.length>10){
return this.name.substring(0, 10) + '(' + total + ')';
}
return this.name + '(' + total + ')';
}
},
series: series,
/*exporting:{
url: intple_server_url+'/chartExport' +"?authToken=" + $intpleConfig.authToken,
buttons: {
exportButton: {
menuItems: [{
textKey: 'downloadPNG',
onclick: function () {
this.exportChart();
}
}, {
textKey: 'downloadJPEG',
onclick: function () {
this.exportChart({
type: 'image/jpeg'
});
}
}, {
textKey: 'downloadPDF',
onclick: function () {
this.exportChart({
type: 'application/pdf'
});
}
}, {
textKey: 'downloadSVG',
onclick: function () {
this.exportChart({
type: 'image/svg+xml'
});
}
}, {
textKey: 'downloadDATA',
onclick: function () {
exportDATA({
data: xaxis,
series: series
});
}
}]
},
printButton: {
onclick: function (evt) {
var target = evt.srcElement;
if (!target || target.length <= 0) {
target = evt.target;
}
var eles = $(target).prevUntil('g');
eles.each(function(){$(this).hide();});
this.print();
setTimeout(function(){eles.each(function(){$(this).show();});}, 500);
}
}
}
},*/
lang:{
downloadPNG: $.language.getText('downloadPNG'),
downloadJPEG: $.language.getText('downloadJPEG'),
downloadPDF: $.language.getText('downloadPDF'),
downloadSVG: $.language.getText('downloadSVG'),
exportButtonTitle: $.language.getText('exportButtonTitle'),
printButtonTitle: $.language.getText('printButtonTitle'),
downloadDATA : $.language.getText('downloadDATA')
}
});
}
|
转播
