0
私はハイチャートを使用して私のウェブサイトのチャートを表示しています。例えば：エクスポート後にチャートが正しく表示されないのはなぜですか？
$(document).ready(function(){
//Gender
var Result=[{"Name":"خانم","Value":59,"Percent":3,"Total":0,"Hours":null},{"Name":"آقای","Value":1708,"Percent":97,"Total":0,"Hours":null}];
var data =[] ;
for (var i in Result) {
var serie = new Array(Result[i].Name, Result[i].Value);
var data22 = [];
data22.push(Result[i].Value);
var obj = {
name: Result[i].Name,
y: Result[i].Value
}
data.push(obj);
}
FixedPieChart(data, "Gender", "بازدید کنندگان به تفکیک جنسیت", '1767', 50);
});
function FixedPieChart(series, elementId, title, total, marginBottom) {
var chart = Highcharts.chart(elementId,
{
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie',
style: {
fontFamily: 'B yekan',
fontSize: '14px',
color: 'black'
}
},
title: {
text: ""
},
tooltip: {
//pointFormat: '<span style="color:black;background-color:white"><span style="direction:rtl"><b>{point.percentage:.1f}%</b><br/>{series.name}</span></span>',
//useHTML: true,
//backgroundColor: '#ffffff',
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
allowOverlap: true,
format: '<span style="dirsction:rtl"><b>{point.name}</b>:{point.percentage:.1f}</span>',
style: {
color: 'black'
},
useHTML: true
},
showInLegend: true,
}
},
legend: {
enabled: true,
layout: 'vertical',
align: 'right',
width: 200,
verticalAlign: 'middle',
useHTML: true,
labelFormatter: function() {
return '<div style="text-align: right; direction:rtl">' + this.name + ' ' + this.percentage.toFixed(1) + '%</div>';
},
// labelFormatter: function() {
// return '<div style="text-align: left; width:130px;float:left;">' + this.name + '</div><div style="width:40px; float:left;text-align:right;">' + this.percentage.toFixed(1)+ '%</div>';
//}
},
series: [{
name: ' از ' + total + ' نفر',
colorByPoint: true,
data: series
}],
credits: {
enabled: false
},
});
}
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel-body bg-light dark" id="Gender" style="direction: ltr !important;margin: 0 auto"></div>
この例では、私は、円グラフを描画しました。ページ上のレンダリング・チャートではすべてのことがうまくいきます。しかし、輸出後にラベルが台無しになる。ラベルが正しく表示されません。
をexporting.allowHTMLを追加し、パーセント？ –
更新されたコードを参照してください。 –
__圧縮されたview__は.in Webビューまたはエクスポート（png、jpeg）を意味します。 –