如何將總計添加到谷歌圖表中的圖表

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

我創建了一個函數來彙總值，你可以看到它，如果你取消註釋警告是正確的。我試着在底部看到添加一個新的行，但它不顯示。

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

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

來源

2017-05-24 Jonathan Porter

嗨，我有莫比爲您解決：

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嵌入這個屬性。我希望那些幫助你或給你做這樣的事情;

來源

2017-05-24 14:17:03

啊謝謝你指出。有沒有辦法讓圖表本身位於圖表的內部？現在總數出現在圖表主體之外。 –

你可以試着用CSS來設計它，所以我的意思是位置，顏色，尺寸等。這對我來說是最快的方式。您可以嘗試使用此功能將此總數和數字添加到var選項。所以..對我來說最好的方法是css（最簡單的方法：P） –

如何將總計添加到谷歌圖表中的圖表

回答

相關問題