如何使Jqplot条形图的点标签垂直对齐? [英] How to make Jqplot Bar chart point labels vertical align.?

问题描述

我正在制作需要帮助的图表. (我已经用Google搜索了很多，但不能成功，这就是为什么要问.-如果可能的话，我向您道歉.)

I am making a graph where I need little help. (I have googled so much but can't succeed thats why asking. - If possible duplicate I apologize.)

我的代码:

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个标签...

and How can I remove 0 values also, Because I am converting this chart to multiple Item's chart. This is currently One Item's Chart.. So How to remove 0 labels also...

推荐答案

基于以下示例:如何使用CSS跨浏览器绘制垂直文本

Based on these examples: point-labels, you can modify the display of point labels using .jqplot-point-label class in your CSS. Therefore, you can use CSS transform property to rotate the text as described here: how-to-draw-vertical-text-with-css-cross-browser

要删除0值的标签，您需要提供一组将零更改为空字符串的标签.您可以像这样使用此自定义设置:

To remove labels for 0 values, you need to provide a set of labels with zeros changed to empty strings. You can use this custom set like this:

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

这是有效的演示-但是，jqPlot似乎阻止了jsfiddle的请求，因此有时脚本无法加载.您可以在本地尝试，也可以访问 jqPlot演示页和jsfiddle结合在一起浏览器窗口，以便从缓存中加载脚本.

Here's a working demo - however, it looks like jqPlot blocks requests from jsfiddle so sometimes the scripts don't load. You can either try locally or visit the jqPlot demo page and the jsfiddle in one browser window so the scripts are loaded from cache.

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

I used a JavaScript array map() function to create the custom set of labels like this:

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

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

Please note that map() might not work in all browsers so you might want to iterate over the array using a for loop instead.

这篇关于如何使Jqplot条形图的点标签垂直对齐?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！