0

我想使用 jqplot 绘制一些数据，但我有一个小问题。

我使用的代码是这样的（小提琴上的代码）：

$.jqplot('chart1', [[202],[249],[148]], {
    seriesColors : ['#ff0000', '#0f0', '#00f'],
    seriesDefaults : {
       renderer :$.jqplot.BarRenderer,
       pointLabels : {
           show : true
       },
       tickRenderer : $.jqplot.CanvasAxisTickRenderer,
        rendererOptions : {
            barDirection : 'horizontal'
        }
    },
    axes: { 
        yaxis: {
            renderer: $.jqplot.CategoryAxisRenderer, 
            ticks: ["some value", "other series", "third series"],
        },
    },
});

该图有 3 个水平区域，“某个值”、“其他系列”和“第三系列” “其他系列”和蓝色到“第三系列”）。

我需要如何格式化数据才能得到这个？

作为额外的问题：

  1. 我希望 yaxis 和相应的 ax 标签之间有几个像素的边距。我该如何设置？

  2. 该图具有背景颜色（淡黄色）。如何消除该颜色并获得容器具有的任何颜色？

4

1 回答 1

1

您需要将数据更改为

data = [[[202,1],[248,2],[148,3]]];

请参阅此处的工作示例。

PS1：您可以通过设置 barWidth = xx 来更改条的宽度；其中 xx 以像素为单位（在给定示例中为 50px）。

PS2：对于您的第一个额外问题，您可以添加如下内容：

$("#chart1 .jqplot-grid-canvas").offset({left:$("#chart1 .jqplot-grid-canvas").offset().left+5});
$("#chart1 .jqplot-series-shadowCanvas").offset({left:$("#chart1 .jqplot-series-shadowCanvas").offset().left+5});
$("#chart1 .jqplot-series-canvas").offset({left:$("#chart1 .jqplot-series-canvas").offset().left+5});
$("#chart1 .jqplot-point-label").offset({left:$("#chart1 .jqplot-point-label").offset().left+5});
$("#chart1 .jqplot-highlight-canvas").offset({left:$("#chart1 .jqplot-highlight-canvas").offset().left+5});
$("#chart1 .jqplot-highlighter-tooltip").offset({left:$("#chart1 .jqplot-highlighter-tooltip").offset().left+5});
$("#chart1 .jqplot-barRenderer-highlight-canvas").offset({left:$("#chart1 .jqplot-barRenderer-highlight-canvas").offset().left+5});
$("#chart1 .jqplot-event-canvas").offset({left:$("#chart1 .jqplot-event-canvas").offset().left+5});

我很确定您可以使其成为一种更清洁的方式，但它可以工作（将+5值更改为您需要的任何值以移动图表块）。请在此处查看更新的工作示例

于 2013-04-10T13:33:59.193 回答