爲什麼導出後圖表無法正確顯示？

Question

我正在使用高圖來顯示我的網站中的圖表。例如：

$(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> 
 

在這個例子中我呈現的餅圖。在頁面上呈現圖表時，每件事情都很好。但出口後標籤都搞亂了。和標籤顯示不正確。

Answer 1

internationalization in highcharts。最後看演示。

對於RTL語言，使用useHTML: Highcharts.hasBidiBug,。

我已禁用dataLables（已嘗試但未與useHTML: Highcharts.hasBidiBug,一起使用）。

希望這有助於

$(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', 
 
    }, 
 
    exporting: { 
 
     allowHTML: true 
 
    }, 
 
    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在選項

exporting: { allowHTML: true },