Question

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

我使用的代码是这个（code on fiddle）：

$.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个水平区域，“某些值”，“其他系列”和“第三系列” 我需要每个图形条都在相应的区域下，并保持颜色为现在（红色为“某个值”，绿色为“其他系列”，蓝色为“第三个系列”）。

如何格式化数据才能获得此效果？

作为额外的问题：

我想在y轴和相应的ax标签之间留下几个像素边距。我该如何设置？
图表有bg颜色（淡黄色）。如何消除这种颜色并将容器的颜色变为bg？

Answer 1

您需要将数据更改为

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

参见工作示例here。

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值更改为您需要的任何值以移动图表块）。请参阅更新的工作示例here

jqplot：绘制系列

1 个答案: