jquery - 使用 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 });