用JQPlot繪製水平條形圖

Question

我需要在應用程序中創建水平條形圖。我的條形圖需要看起來像以下（不按比例）：

Item 1 |========14012=== 
Item 2 |=112= 
Item 3 |======9012== 
Item 4 |===321= 
Item 5 |==================================165679== 
Item 6 |32= 
Item 7 |=======12312== 
Item 8 |47= 
Item 9 |5= 
Item 10 |==================98765==== 
     ------------------------------------------------ 
      100         170000 

目前，我嘗試以下：

var data = [ 
    { "name" : "Item 1", "total" : 14012 }, 
    { "name" : "Item 2", "total" : 112 }, 
    { "name" : "Item 3", "total" : 9012 }, 
    { "name" : "Item 4", "total" : 321 }, 
    { "name" : "Item 5", "total" : 165679 }, 
    { "name" : "Item 6", "total" : 32 }, 
    { "name" : "Item 7", "total" : 12312 }, 
    { "name" : "Item 8", "total" : 47 }, 
    { "name" : "Item 9", "total" : 5 }, 
    { "name" : "Item 10", "total" : 98765 }, 
]; 

$.jqplot('myChart', [[[5, 1], [5, 3], [5, 5]]], { 
    seriesDefaults: { 
    renderer: $.jqplot.BarRenderer, 
    shadowAngle: 135, 
    rendererOptions: { 
     barDirection: 'horizontal' 
    }, 
    pointLabels: { show: true, formatString: '%d' } 
    }, 
    axes: { 
    yaxis: { 
     renderer: $.jqplot.CategoryAxisRenderer 
    }, 
    xaxis: { 
     ticks: ticks 
    } 
    } 
}).replot({ clear: true, resetAxes: true }); 

我不知道如何讓我的數據jqplot圖表。部分是爲了讓左列的標籤反映我的數據中的名稱。我一直在閱讀文檔，沒有任何運氣。

謝謝您提供的任何見解。

Answer 1

你應該使用的$.jqplot.CanvasAxisLabelRenderer代替$.jqplot.CategoryAxisRenderer

樣本：

$.jqplot('myChart', [[[5, 1], [5, 3], [5, 5]]], { 
    seriesDefaults: { 
    renderer: $.jqplot.BarRenderer, 
    shadowAngle: 135, 
    rendererOptions: { 
     barDirection: 'horizontal' 
    }, 
    pointLabels: { show: true, formatString: '%d' } 
    }, 
    axes: { 
    yaxis: { 
     renderer: $.jqplot.CanvasAxisLabelRenderer 
    }, 
    xaxis: { 
     ticks: ticks 
    } 
    } 
}).replot({ clear: true, resetAxes: true });