使用highcharts的可滾動堆積柱形圖？

我需要創建一個堆積柱狀圖來顯示爲下面的需求捕獲的數據。使用highcharts的可滾動堆積柱形圖？

顯示員工針對不同項目（Project1，Project2，Project3）工作的小時數。

我試過使用Highcharts。當我嘗試爲圖表啓用Scrollable功能時，由於員工數量可能更多，因此標籤（員工姓名）不會顯示在X軸上。

此外，滾動似乎是不正確的。

任何人都可以幫助我製作此圖表並且可以在X軸上顯示員工姓名作爲標籤。

我已經共享我已經建立至今在圖表，

代碼也如下， $（函數（）{ $（ '＃容器'）。highcharts（ 'StockChart'，{

chart: { 
     type: 'column', 
     inverted:true 
    }, 
     title: { 
      text: 'Total Hours worked Vs Different Projects' 
     }, 
     xAxis: { 
      categories: ['user1', 'user2', 'user3', 'user4', 'user5','user6', 'user7', 'user8', 'user9', 'user10','user11', 'user12', 'user13', 'user14', 'user15','user16', 'user17', 'user18', 'user19', 'user20'], 
      labels: { 
       rotation: -45, 
       align: 'right', 
       style: { 
        fontSize: '13px', 
        fontFamily: 'Verdana, sans-serif' 
       } 
      } 

     }, 
    yAxis: { 
      min: 0, 
      title: { 
       text: 'Total Hours Worked' 
      }, 
      stackLabels: { 
       enabled: true, 
       style: { 
        fontWeight: 'bold', 
        color: (Highcharts.theme && Highcharts.theme.textColor) || 'red' 
       } 
      } 
     }, 

     plotOptions: { 
      column: { 
       stacking: 'normal' 

      } 
     }, 
    scrollbar: { 
     enabled:true 

    }, 

    rangeSelector: { 
     enabled: false 
    }, 

    series: [{ 
      name: 'Project1', 
      data: [5, 3, 4, 7, 2,5, 3, 4, 7, 2 ,5, 3, 4, 7, 2,5, 3, 4, 7, 2] 
     }, { 
      name: 'Project2', 
      data: [2, 2, 3, 2, 1,5, 3, 4, 7, 2, 5, 3, 4, 7, 2,5, 3, 4, 7, 2] 
     }, { 
      name: 'Projecct3', 
      data: [3, 4, 4, 2, 5,5, 3, 4, 7, 2, 5, 3, 4, 7, 2,5, 3, 4, 7, 2] 
     }] 
});

}）; 謝謝，斯里蘭卡

來源

2013-03-31 javauser

它是通過使用在highstock類別，其未在Highstock支持引起的。所以你可以用highcharts替換它http://jsfiddle.net/Yyq5N/3/ –

可以做滾動/堆積柱形圖與amCharts：http://jsfiddle.net/zeroin/mmmv2/

的代碼：

 

    AmCharts.ready(function() { 
    var chartData = [ 
     {category:"user1", val1:1, val2:1, val3:1}, 
     {category:"user2", val1:2, val2:1, val3:2}, 
     {category:"user3", val1:1, val2:1, val3:4}, 
     {category:"user4", val1:2, val2:1, val3:2}, 
     {category:"user5", val1:1, val2:1, val3:5}, 
     {category:"user6", val1:2, val2:1, val3:2}, 
     {category:"user7", val1:1, val2:1, val3:3}, 
     {category:"user8", val1:2, val2:1, val3:1}, 
     {category:"user9", val1:1, val2:1, val3:3}, 
     {category:"user10", val1:2, val2:1, val3:4}, 
     {category:"user11", val1:1, val2:1, val3:3}, 
     {category:"user12", val1:2, val2:1, val3:3}, 
     {category:"user13", val1:1, val2:1, val3:3}, 
     {category:"user14", val1:2, val2:1, val3:1} 
    ]; 

    var chart = new AmCharts.AmSerialChart(); 
    chart.pathToImages = "http://www.amcharts.com/lib/images/"; 
    chart.dataProvider = chartData; 
    chart.categoryField = "category"; 

    var valueAxis = new AmCharts.ValueAxis(); 
    valueAxis.stackType = "regular"; 
    valueAxis.totalText = "[[total]]"; 
    chart.addValueAxis(valueAxis); 

    var graph1 = new AmCharts.AmGraph(); 
    graph1.valueField = "val1"; 
    graph1.type = "column"; 
    graph1.fillAlphas = 1; 
    chart.addGraph(graph1); 

    var graph2 = new AmCharts.AmGraph(); 
    graph2.valueField = "val2"; 
    graph2.type = "column"; 
    graph2.fillAlphas = 1; 
    chart.addGraph(graph2); 

    var graph3 = new AmCharts.AmGraph(); 
    graph3.valueField = "val3"; 
    graph3.type = "column"; 
    graph3.fillAlphas = 1; 
    chart.addGraph(graph3); 

    var chartScrollbar = new AmCharts.ChartScrollbar(); 
    chart.addChartScrollbar(chartScrollbar); 

    chart.write("chartdiv"); 
});

來源

2013-04-01 15:05:30 zeroin

使用highcharts的可滾動堆積柱形圖？

回答

相關問題