jqplot：繪製系列

我想使用jqplot繪製一些數據，我有一個小問題。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軸和相應的斧頭標籤之間的餘量。我如何設置？
該圖具有bg顏色（淡黃色）。我該如何消除這種顏色並獲得容器的顏色？

來源

2013-04-10 Zelter Ady

您需要將您的數據更改爲

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

來源

2013-04-10 13:33:59 AnthonyLeGovic

不錯。但是，如果仔細觀察，您可以看到每個酒吧並不居中居中。你知道如何居中嗎？（如綠條，與標籤文字對齊）。 – 2013-04-10 13:37:20

將數據從data = [[[202,1]]，[[249,2]]，[[148,3]]];到data = [[[202,1]，[248,2]，[148,3]]]; （抱歉括號錯誤）。 – AnthonyLeGovic 2013-04-10 14:06:38

已更新示例[此處]（http://jsfiddle.net/AnthonyLeGovic/vTwU2/14/）回答（不是乾淨的方式來做）你的第一個額外問題 – AnthonyLeGovic 2013-04-10 14:20:47

jqplot：繪製系列

回答

相關問題