我使用Highchart在我的页面中绘制一些图表。我正在为我的图表设置一些属性。我看到,为了下载和保存某些类型的图表,Highchart使用了导出。但保存的图表的属性与原始图表不同。 例如我原来的图表是这样的:
我的代码是:
Highcharts.setOptions({ colors: color_items_array, locale: getPersianLocal()});
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
exporting: {
allowHTML:true ,
chartOptions: {
xAxis: {
labels: {
align: 'top',
}
},
},
buttons: {
contextButton: {
menuItems: [{
textKey: 'printChart',
onclick: function () {
this.print();
}
}, {
separator: true
}, {
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'
});
}
}, {
separator: true
},{
text: 'Clinet side export to PNG',
onclick: function () {
this.exportChartLocal();
}
}, {
text: 'Clinet side export to SVG',
onclick: function () {
this.exportChartLocal({
type: 'image/svg+xml'
});
}
}]
}
}
},
chart: {
renderTo: conta,
type: type,
marginRight: 130,
marginBottom: 120
},
title: {
text: X_title,
x: -20 //center
},
subtitle: {
text: '',
x: -20
},
// plotOptions: {
// column: {
// minPointLength: 20
// }
//},
xAxis: {
min:0,
max:maxVariable,
labels: {
//rotation: rotlab,
align: 'top',
// align: 'center',
autoRotation: [-45],
autoRotationLimit: 100
},
categories: xAxisLabel
},
yAxis: yAxisVariale,
plotOptions: {
series: {
dataLabels: {
enabled: dataLabelvariable,
// y: -5,
inside:false,
crop :false,
overflow :'none',
style: {
fontWeight: 'bold'
},
formatter: function() {
return Highcharts.localizationNumber(this.y);
},
useHTML: true
}
}
},
tooltip: {
crosshairs: [true, true],
shared: true,
useHTML: true,
formatter: function() {
var s = [];
s.push('<table><tr><td style="text-align:right;" colspan="3"><b>' +
this.x + '</b></td></tr>');
$.each(this.points, function(i, point) {
s.push('<tr><td style="text-align: right;">'+
'<b><span style="color:'+point.series.color +'">\u25CF</span></b>'+
'</td>'+
'<td style="text-align: right;"><b>'+point.series.name +' : </b></td>'+
'<td><b>' + Highcharts.localizationNumber(point.y)+'</b></td>'+
'</tr>');
});
s.push('<tr><td style="text-align:right;" colspan="3"><b>تعداد خبر : ' +
Highcharts.localizationNumber(this.points[0].point.NumberNews) + '</b></td></tr></table>');
return s.join('');
}
},
legend: {
labelFormatter: function() {
return '<b>'+this.name+'</b>';
},
borderWidth: 1,
useHTML: true,
borderColor: '#C98657',
backgroundColor: '#FCFFC5'
},
series: seris_column2,
scrollbar: {
enabled: scrbal,
barBackgroundColor: 'gray',
barBorderRadius: 7,
barBorderWidth: 0,
buttonBackgroundColor: 'gray',
buttonBorderWidth: 0,
buttonArrowColor: 'yellow',
buttonBorderRadius: 7,
rifleColor: 'yellow',
trackBackgroundColor: 'white',
trackBorderWidth: 1,
trackBorderColor: 'silver',
trackBorderRadius: 7
}
});
});
我的主要问题是:
1)更改字符串的字体和大小(标签和标题,..)
2)相关字符串的重叠
3)当xaxis标签转为-45时,标签会上升。(换另一个例子..)
我用过:
exporting: {
allowHTML:true ,
chartOptions: {
xAxis: {
labels: {
align: 'top',
}
},
}
但没有改变任何事情......
我该怎么办?
由于