如何使Jqplot条形图点标签垂直对齐。？

我正在制作一个我需要帮助的图表。 （我已经搜索了这么多，但不能成功那就是为什么要问。 – 如果可能重复，我道歉。）

我的代码：

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值，因为我将此图表转换为多个Item的图表。 这是目前One Item的图表..所以如何删除0标签也……

Answer 1

基于以下示例： 点标签 ，您可以使用.jqplot-point-label类修改点标签的显示。 因此，您可以使用CSS transform属性来旋转文本，如下所述： how-to-draw-vertical-text-with-css-cross-browser

要删除0值的标签，您需要提供一组标签，其中零更改为空字符串。 您可以像这样使用此自定义集：

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

这是一个有效的演示 – 然而，看起来jqPlot阻止来自jsfiddle的请求，所以有时脚本不会加载。 您可以在本地尝试或在一个浏览器窗口中访问jqPlot演示页面和jsfiddle，以便从缓存加载脚本。

我使用JavaScript数组map()函数来创建自定义标签集，如下所示：

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

请注意， map()可能不适用于所有浏览器，因此您可能希望使用for循环遍历数组。