Google Charts：ChartWrapper和Formatters（NumberFormat）

2 回答

• 6

  您可以在包装器外定义数据，在其上使用formatter，然后将dataTable设置为等于该数据源：

  function drawVisualization() {
  
    var data = google.visualization.arrayToDataTable([
          ['Person', 'Score'], [1, .50], [2, .25]
      ]);
  
    // set tooltip as percentage
    var formatter = new google.visualization.NumberFormat({
      pattern: '#%',
      fractionDigits: 2
    });
    formatter.format(data, 1);
  
    var wrapper = new google.visualization.ChartWrapper({
      chartType: 'LineChart',
      dataTable: data,
      options: {'legend': 'bottom', 'colors': ['#D70005'], 'chartArea': {left: 40, top: 10, width: 450}, 'vAxis': {format: '#,###%', 'viewWindow': {max: 1.05, min: .2}}, 'pointSize': 6},
      containerId: 'visualization'
    });
  
  
    wrapper.draw();
  }
  

  结果：

  

  回复于 2024-05-17T08:39:02+08:00
• 1

  对于那些使用Google JSON schema生成图表数据且无法使用ChartWrapper使用NumberFormat的人，可以直接将格式应用于行"f"：null

  注意：

  • 我发现NumberFormat构造函数方法适用于DataTables但不适用于ChartWrapper .

  Using DataTable > OK

  var chart = new google.visualization.PieChart(document.getElementById('chart'));
  var dataTable = new google.visualization.DataTable(data); 
  var formatter = new google.visualization.NumberFormat({prefix: '$'});
  formatter.format(dataTable, 1);
  

  Using ChartWrapper > BAD

  var formatter = new google.visualization.NumberFormat({prefix: '$'});
  formatter.format(data, 1);
  
  var wrapper = new google.visualization.ChartWrapper({
      chartType: 'PieChart',
      dataTable: data,
      options: myPieChartOptions(),
      containerId: 'chart_div'
  });
  

  这就是我使用Google JSON正确格式化数据的方式 .

  示例JSON：

  {
      "cols": [
            {"id":"","label":"Product","pattern":"","type":"string"},
            {"id":"","label":"Sales","pattern":"","type":"number"}
          ],
      "rows": [
            {"c":[{"v":"Nuts","f":null},{"v":945.59080870918,"f":"$945.59"}]}
          ]
   }
  

  这是生成该JSON的PHP代码

  setlocale(LC_MONETARY, 0);
  
  // init  arrays
  $result['cols'] = array();
  $result['rows'] = array();
  
  // add col data
  $result['cols'][] = array(
      "id" => "",
      "label" => "Product",
      "pattern" => "",
      "type" => "string"
  );
  $result['cols'][] = array(
      "id" => "",
      "label" => "Sales",
      "pattern" => "",
      "type" => "number"
  );
  
  $nutsTotalFormat =  "$".number_format($nutsTotal, 2);
  
  $result['rows'][]["c"] = array(array("v" => "Nuts","f" => null),array("v" => $nutsTotal,"f" => $nutsTotalFormat ));
  

  饼图将显示$ nutsTotalFormat的格式化结果

  “$ 945.59”

  回复于 2024-05-17T08:39:02+08:00