如何使Jqplot條形圖點標籤垂直對齊。？

Question

我正在製作一張圖，我需要一點幫助。 （我用Google搜索了這麼多，但問爲什麼不能成功這就是 - 如果可能的話重複我道歉。）

我的代碼：

var plot2 = $.jqplot('distance_graph', data.distance, { 
       // The "seriesDefaults" option is an options object that will 
       // be applied to all series in the chart. 
       seriesDefaults:{ 
        renderer:$.jqplot.BarRenderer, 
        rendererOptions: {fillToZero: false}, 
        pointLabels: { show: true }, 
       }, 
       // Custom labels for the series are specified with the "label" 
       // option on the series option. Here a series option object 
       // is specified for each series. 

       // Show the legend and put it outside the grid, but inside the 
       // plot container, shrinking the grid to accomodate the legend. 
       // A value of "outside" would not shrink the grid and allow 
       // the legend to overflow the container. 
       legend: { 
        show: true, 
        placement: 'outsideGrid' 
       }, 
       axes: { 
        // Use a category axis on the x axis and use our custom ticks. 
        xaxis: { 
         renderer: $.jqplot.CategoryAxisRenderer, 
         label: 'Date', 
         ticks: ticks, 
         labelRenderer: $.jqplot.CanvasAxisLabelRenderer, 
         tickRenderer: $.jqplot.CanvasAxisTickRenderer, 
         tickOptions: { 
          angle: -30 
         } 
        }, 
        // Pad the y axis just a little so bars can get close to, but 
        // not touch, the grid boundaries. 1.2 is the default padding. 
        yaxis: { 
         label: 'Distance Travelled', 
         pad: 1.05, 
         labelRenderer: $.jqplot.CanvasAxisLabelRenderer, 
         tickRenderer: $.jqplot.CanvasAxisTickRenderer, 
         tickOptions: { 
          labelPosition:'middle' 
         }, 
         min:min_val, 
         max:max_val  
        } 
       } 
      }); 
     plot2.legend.labels = data.device; 
     plot2.replot({ resetAxes: false }); 

，我怎樣才能刪除0值還，因爲我將此圖表轉換爲多個項目的圖表。這是目前的一個項目的圖..所以如何刪除0標籤也...

Answer 1

基於這些例子：point-labels，您可以修改點標籤的顯示使用.jqplot-point-label類在您的CSS。因此，您可以使用CSS transform屬性來旋轉文本，如下所述：how-to-draw-vertical-text-with-css-cross-browser

要刪除0值的標籤，您需要提供一組零標籤更改爲空字符串的標籤。您可以使用此定製設置是這樣的：

pointLabels: { 
    show: true, 
    labels: customSetOfLabels 
}, 

這裏的a working demo - 但是，它看起來像的jsfiddle jqPlot塊的請求所以有時腳本不加載。您可以在本地嘗試或在一個瀏覽器窗口中訪問jqPlot demo page和jsfiddle，以便從緩存中加載腳本。

我用了一個JavaScript數組map()函數創建標籤像這樣的自定義組：

function removeZeros(x){ 
    return x===0 ? '' : x; 
} 
var line1 = [14, 32, 41, 44, 0, 40]; 
var line1Labels = line1.map(removeZeros); 

請注意，map()可能無法在所有的瀏覽器，所以你可能要使用的陣列上進行迭代代替循環。