Javascript 如何在google charts中向图表添加总计_Javascript_Charts_Google Visualization

Javascript 如何在google charts中向图表添加总计

javascript charts google-visualization

Javascript 如何在google charts中向图表添加总计,javascript,charts,google-visualization,Javascript,Charts,Google Visualization,我想在下表中加上总金额 </script> <body>  <table class="columns"> <tr> <td> <div id="total_costs_pie" style="border: 1px solid #ccc"></div>

我想在下表中加上总金额

</script>

<body>
  <!--Table and divs that hold the pie charts-->
  <table class="columns">
    <tr>
      <td>
        <div id="total_costs_pie" style="border: 1px solid #ccc"></div>
      </td>
    </tr>
    <tr>
      <td id="total"></td>
      <td id="number"></td>
    </tr>
  </table>

</script>

<body>
  <!--Table and divs that hold the pie charts-->
  <table class="columns">
    <tr>
      <td>
        <div id="total_costs_pie" style="border: 1px solid #ccc"></div>
      </td>
    </tr>
    <tr>
      <td id="total"></td>
      <td id="number"></td>
    </tr>
  </table>

我创建了一个函数来求和这些值，如果取消对警报的注释，您可以看到它是正确的。我尝试为总数添加一个新行，如底部所示，但没有显示

</script>

<body>
  <!--Table and divs that hold the pie charts-->
  <table class="columns">
    <tr>
      <td>
        <div id="total_costs_pie" style="border: 1px solid #ccc"></div>
      </td>
    </tr>
    <tr>
      <td id="total"></td>
      <td id="number"></td>
    </tr>
  </table>

//加载图表和corechart/bar char包。
google.charts.load（'current'{
软件包：['corechart']
});
//加载图表时，绘制总成本的饼图。
google.charts.setOnLoadCallback（drawPieChart）；
//画馅饼
函数drawPieChart（）{
var data=google.visualization.arrayToDataTable([
[“国家”，“美元]，
[‘加拿大’，12250000]，
[‘美国’，22750000]
]);
函数getSum（数据，列）{
var合计=0；
对于（i=0；i


嗨，我有一个很好的解决方案给你：
</script>

<body>
  <!--Table and divs that hold the pie charts-->
  <table class="columns">
    <tr>
      <td>
        <div id="total_costs_pie" style="border: 1px solid #ccc"></div>
      </td>
    </tr>
    <tr>
      <td id="total"></td>
      <td id="number"></td>
    </tr>
  </table>

HTML:

</script>

<body>
  <!--Table and divs that hold the pie charts-->
  <table class="columns">
    <tr>
      <td>
        <div id="total_costs_pie" style="border: 1px solid #ccc"></div>
      </td>
    </tr>
    <tr>
      <td id="total"></td>
      <td id="number"></td>
    </tr>
  </table>



JAVASCRIPT:
</script>

<body>
  <!--Table and divs that hold the pie charts-->
  <table class="columns">
    <tr>
      <td>
        <div id="total_costs_pie" style="border: 1px solid #ccc"></div>
      </td>
    </tr>
    <tr>
      <td id="total"></td>
      <td id="number"></td>
    </tr>
  </table>

// Load Charts and the corechart/bar char package.
google.charts.load('current', {
  packages: ['corechart']
});

// Draw the pie chart for the Total Costs when Charts is loaded.
google.charts.setOnLoadCallback(drawPieChart);

// Draw the pie
function drawPieChart() {
  var data = google.visualization.arrayToDataTable([
    ['Country', 'Dollars'],
    ['Canada', 12250000],
    ['USA', 22750000]
  ]);

  function getSum(data, column) {
    var total = 0;
    for (i = 0; i < data.getNumberOfRows(); i++)
      total = total + data.getValue(i, column);
    return total;
  }

  //alert(getSum(data, 1));


  // In order to show currency correctly
  var formatter = new google.visualization.NumberFormat({
    negativeColor: 'red',
    negativeParens: true,
    pattern: '$###,###'
  });
  formatter.format(data, 1);

  var options = {
    title: "North America 2017",
    legend: {
      position: 'top'
    },
    pieSliceText: 'value-and-percentage',
    slices: {
      0: {
        color: '#328213'
      },
      1: {
        offset: 0.1,
        color: '#57a33a'
      },
    },
    pieStartAngle: 70,
    width: 400,
    height: 300
  };

  var chart = new google.visualization.PieChart(document.getElementById('total_costs_pie'));

  chart.draw(data, options);
  //function for addRow.....
  function addRow (name, number) {
    //add name and number to .total
    total_name = document.createTextNode(name + number);
    total.appendChild(total_name);
  }
  addRow('Total: ', getSum(data, 1));
}

//加载图表和corechart/bar char包。
google.charts.load（'current'{
软件包：['corechart']
});
//加载图表时，绘制总成本的饼图。
google.charts.setOnLoadCallback（drawPieChart）；
//画馅饼
函数drawPieChart（）{
var data=google.visualization.arrayToDataTable([
[“国家”，“美元]，
[‘加拿大’，12250000]，
[‘美国’，22750000]
]);
函数getSum（数据，列）{
var合计=0；
对于（i=0；i

我为addRow添加了函数。和新的tr和td来嵌入这个心房。我希望这能帮助你，或者给你做类似事情的途径；） 啊谢谢你指出这一点。有没有办法让总数在图表里？现在总计显示在图表主体之外。你可以尝试用css来设置它的样式，所以我指的是位置、颜色、大小等。这对我来说是最快的方式。您可以尝试使用此函数将此总数和数字添加到var选项中。所以对我来说，最好的方法是css（最简单的方法：P）
</script>

<body>
  <!--Table and divs that hold the pie charts-->
  <table class="columns">
    <tr>
      <td>
        <div id="total_costs_pie" style="border: 1px solid #ccc"></div>
      </td>
    </tr>
    <tr>
      <td id="total"></td>
      <td id="number"></td>
    </tr>
  </table>