如何更改控制器的Google Charts数字格式？

Question

使用Google Charts实施信息中心时，我们可以使用google.visualization.NumberFormat()更改表格中显示数量的格式。

但是，我们还没有找到一种方法来改变控制器中的数字格式。我们想要完成图像显示的内容：

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

Answer 1

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

 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: '$';
}

完整示例

＆＃13;

＆＃13;

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);
}

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

谷歌API具有内置功能。<​​/ p>

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

为它做了一个小小提琴，link。

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