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 });

使用JQPlot绘制水平条形图

1 个答案: