jqplot：画系列

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

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

作为附加问题：

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

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

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