如何更改 Google 控制器的图表编号格式？

Question

使用 Google 图表实现仪表板时，我们可以使用 google.visualization.NumberFormat() 更改表格中显示数量的格式。

但是，我们未能找到更改控制器中数字格式的方法。我们想完成图片显示的内容：

我们查看了 documentation for Google Charts controllers，但找不到任何对此有帮助的信息。任何帮助表示赞赏。 :)

Answer 1

您可以指定 ui.cssClass 选项以将自定义 CSS class 分配给控件：

 programmaticSlider = new google.visualization.ControlWrapper({
        'controlType': 'NumberRangeFilter',
        'containerId': 'programmatic_control_div',
        'options': {
            'filterColumnLabel': 'Salary',
            'ui': { 'cssClass': 'currencyfilter' }
        }
    });

然后为缩略图标签指定规则：

.currencyfilter .google-visualization-controls-rangefilter-thumblabel:before {
      color: brown;
      content: '$';
}

完整示例

google.load('visualization', '1', { 'packages': ['corechart', 'controls'] });
google.setOnLoadCallback(drawChart);

function drawChart() {

    var dashboard = new google.visualization.Dashboard(
      document.getElementById('programmatic_dashboard_div'));

    // We omit "var" so that programmaticSlider is visible to changeRange.
    var programmaticSlider = new google.visualization.ControlWrapper({
        'controlType': 'NumberRangeFilter',
        'containerId': 'programmatic_control_div',
        'options': {
            'filterColumnLabel': 'Salary',
            'ui': { 'labelStacking': 'vertical', 'cssClass': 'currencyfilter' }
        }
    });

    var programmaticChart = new google.visualization.ChartWrapper({
        'chartType': 'PieChart',
        'containerId': 'programmatic_chart_div',
        'options': {
            'width': 300,
            'height': 300,
            'legend': 'none',
            'chartArea': { 'left': 15, 'top': 15, 'right': 0, 'bottom': 0 },
            'pieSliceText': 'value'
        }
    });

    var data = google.visualization.arrayToDataTable([
      ['Name', 'Salary'],
      ['Mike', 10000],
      ['Jim', 8000],
      ['Alice', 12500],
      ['Bob', 7000]
    ]);

    var formatter = new google.visualization.NumberFormat({ prefix: '$' });
    formatter.format(data, 1);

    dashboard.bind(programmaticSlider, programmaticChart);
    dashboard.draw(data);
}

 .currencyfilter .google-visualization-controls-rangefilter-thumblabel:before {
     color: brown;
     content: '$';
 }

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
 <div id="programmatic_dashboard_div" style="border: 1px solid #ccc">
   <table class="columns">
        <tr>
          <td>
            <div id="programmatic_control_div" style="padding-left: 2em; min-width: 250px"></div>
          </td>
          <td>
            <div id="programmatic_chart_div"></div>
          </td>
        </tr>
  </table>
</div>

Answer 2

google API 有一个内置函数。

options:{
    ui:{
      format:{
        prefix:'$',
      }
   }

为它做了一个小fiddle，link。

有关配置的更多信息 here and here。

如何更改 Google 控制器的图表编号格式？

How to change Google Charts number format for controllers?

charts

google-visualization