JavaScript 柱狀圖庫使得制作高質量業務圖分析報告變得更為簡單。這些庫可以讓您快速繪制自適應、交互式圖表、屬性豐富并符合國際慣例。本篇文章將主要討論 JavaScript 柱狀圖如何合計。

JavaScript 項目開發人員在處理柱狀圖數據時，經常需要計算出每組數據的總數，并在圖表上顯示出來。在圖表沒有大量數據時，手動計算可以勝任。然而，當數據集變得更加復雜時，我們需要從程序員的角度去考慮問題。例如，假設圖表展示了一家市場銷售的商品數量，年銷售量達到幾百萬。

JavaScript 庫提供了函數可以用于對數據進行聚合處理，例如，求和、平均值和計數等。使用 JavaScript 庫對柱狀圖數據進行求和處理是非常簡單的。我們來看看展示了兩家公司銷售數量的柱狀圖，并且需要計算總數量：

var company1 = [200, 400, 600];
var company2 = [150, 350, 550];
var total = company1.concat(company2);
var sum = total.reduce((a, b) =>a + b);
console.log(sum); // 2250

在這個例子中，我們定義了兩個數組：company1 和 company2，它們分別存儲了兩家公司的銷售數量。使用concat()函數將這兩個數組合并，得到一個新的數組total。然后使用 reduce() 函數對數組total進行求和處理。

在柱狀圖上顯示總數是非常有用的，可以更好地幫助觀眾理解數據的含義。最終效果展示如下：

var chart = new CanvasJS.Chart("chartContainer", {
// 配置項
data: [{
// 數據系列1配置
dataPoints: [
{ label: "Jan", y: 200 },
{ label: "Feb", y: 400 },
{ label: "Mar", y: 600 }
]
}, {
// 數據系列2配置
dataPoints: [
{ label: "Jan", y: 150 },
{ label: "Feb", y: 350 },
{ label: "Mar", y: 550 }
]
}]
});
var company1 = [200, 400, 600];
var company2 = [150, 350, 550];
var total = company1.concat(company2);
var sum = total.reduce((a, b) =>a + b);
chart.options.data.push({
// 合計配置
type: "column",
dataPoints: [
{ label: "Total", y: sum }
]
});
chart.render();

在上述代碼中，我們定義了一個新的數據系列，用于展示匯總數據，類型設置為柱狀圖type: "column"。顯示匯總數據的代碼在chart.options.data.push({})中進行配置，它會將合計數據添加到柱狀圖中。最終效果如下：


在本文中，我們分享了如何使用 JavaScript 庫對柱狀圖數據進行求和處理。使用 JavaScript 庫可以讓我們更加專注于數據分析和呈現，而無需處理繁瑣的計算工作。希望本文能夠對您在開發 JavaScript 柱狀圖時有所幫助。