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

在highcharts中

internationalization。最后看演示。

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 },

导出后为什么图表无法正确呈现？

1 个答案: