Question

我正在IONIC应用程序中使用Google的饼图，我想在rtl方向上显示图例和标题。

这是我的图表功能：

drawChart () { // Create the data table.

    var data = new this.googleChartLibrary.visualization.DataTable();

    data.addColumn('string', 'Activity Name');
    data.addColumn('number', 'Hours');
    data.addRows([
      ['חיים עוזר פ"ת', 8],
      ['ההגנה 25 פ"ת', 8],
      ['ד"ר פון פיקס אור יהודה', 2],

    ]);

    // Instantiate and draw our chart, passing in some options.
    var chart = new this.googleChartLibrary.visualization
      .PieChart(document.getElementById('pie-chart-div'));

    chart.draw(data, {
      'title': 'סניפים',
      'width': 400,
      'height': 300,

      // Here, have a some option as described below?

      titleTextStyle: { fontSize: 12, bold: true},
      chartArea: { width: '100%', height: '100%', left: 70, top: 100 },
      is3D: true,
      legend: { position: 'right',  textStyle: { fontSize: 12, bold: true } }

    });
  }

在调用chart.draw的第二个参数中，有一个包含选项的对象，我需要一个特定的选项，该选项将导致文本从右到左（rtl）写入。

有人知道如何配置吗？

Answer 1

通常，如果要将Ionic应用程序更改为RTL，可以在index.html中更改dir属性。

在 index.html 文件更改中：

<html lang="en" dir="ltr">

收件人：

<html lang="he" dir="rtl">

如果 index.html 文件中的更改不起作用，您可以尝试通过编程方式手动更改Google饼图元素中的dir属性，如下所示：

document.getElementsByTagName(<your pie chart tag>)[0].setAttribute('dir', 'rtl');

有关options属性的更多详细信息，请查看此链接pie chart configuration options。

另外，为了使您的代码更清晰易读，我建议使用以下结构：

data = ... #you data
options = ... #your options
chart.draw(data, options)

祝你好运

IONIC框架上的饼图Google中的rtl方向文本是否有任何属性？类似于“方向：rtl”？

1 个答案: