2017-03-07 51 views
0

我正在嘗試使用Hightables創建一個餅圖來顯示任務和花費的時間細分。JavaScript/Hightables - 添加具有時間和輸出百分比的獨特項目

目前,我有信息的HTML表格如下:

Task Description Time Taken 
Working on ticket 235 
Proactive Maintenance 1127 
Documentation 1797 
Working on ticket 571 
Proactive Maintenance 1161 
Administration Task 785 
Proactive Maintenance 217 
Administration Task 831 
Proactive Maintenance 1679 

我的圖表正確地獲取數據,但顯示每一行分一杯羹,但我想這一切加起來。

下面是我的圖表代碼:

Highcharts.chart('tablecontainer', { 
    data: { 
    table: 'datatable' 
    }, 
    chart: { 
    type: 'pie' 
    }, 
    title: { 
    text: 'Time Breakdown' 
    }, 
    tooltip: { 
    formatter: function() { 
     return '<b>' + this.series.name + '</b><br/>' + 
     this.point.y + ' ' + this.point.name.toLowerCase(); 
    } 
    } 
}); 

以下是圖表最終看起來像:

Chart 任何人都可以建議組這些的最佳途徑,並顯示他們在一塊的餡餅?

TIA

回答

0

考慮您的數據是這樣的,這是餅圖預計

var data = [{name:"Working on ticket", y: 235}, 
{name:"Proactive Maintenance", y: 1127}, 
{name:"Documentation", y: 1797}, 
{name:"Working on ticket", y: 571}, 
{name:"Proactive Maintenance", y: 1161}, 
{name:"Administration Task", y: 785}, 
{name:"Proactive Maintenance", y: 217}, 
{name:"Administration Task", y: 831}, 
{name:"Proactive Maintenance", y: 1679}]; 

你可以組自己動手

var grouppedData = new Array(); 
for (var i in data) 
{ 
    if (grouppedData[data[i].name] == undefined) 
    { 
      grouppedData[data[i].name] = data[i].y 
    } 
    else 
    { 
      grouppedData[data[i].name] += data[i].y 
    } 
} 
data = new Array(); 
for (var i in grouppedData) 
{ 
    data.push({ name: i, y: grouppedData[i]}); 
} 

這裏的格式是完全撥弄生成圖表http://jsfiddle.net/caqenfv4/