Question

我想在下面的图表中添加总额。

https://jsfiddle.net/porterhouse47/6e0ejxLb/

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

＆＃13;

// 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);
  addRow('Total', getSum(data, 1));
}

＆＃13;

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/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>
  </table>

＆＃13;

Answer 1

您好我有maby解决方案：

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

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

我为你的addRow添加了功能。并且新的tr和td嵌入了这个属性。我希望这可以帮助你或给你做这样的事情;）

如何在Google图表中向图表添加总计

1 个答案: