Question

我无法在Jqplot堆积条形图中删除零（点标记）。我试过'hideZero'，但它根本不起作用。

Graph with zeros

我尝试了不同的东西;不确定是什么问题。我导入了以下包：

jqplot.barRenderer.min.js
jqplot.canvasAxisLabelRenderer.min.js
jqplot.canvasAxisTickRenderer.min.js
jqplot.canvasTextRenderer.min.js
jqplot.categoryAxisRenderer.min.js
jqplot.pointLabels.min.js
jquery-2.0.3.js
jquery.jqplot.min.css
jquery.jqplot.min.js

这是JavaScript：

var s3 = [11, 28, 22, 47, 11, 11];
var s1 = [0, 6, 3, 0, 0, 0];
var s2 = [1, 0, 3, 0, 0, 0];
var dataArray = [s3, s1, s2];
var ticks = ['John', 'Tumm', 'Wen', 'Ken', 'Dolly'];

var options = {
    title: 'Title ',
    stackSeries: true,
    seriesColors: ["#eb4b3d", "#ffc800", "#009149"],
    seriesDefaults: {
        renderer: $.jqplot.BarRenderer,
        pointLabels: {
            show: true
        },
        rendererOptions: {
            barWidth: 25,
            varyBarColor: true,
        },
    },
    axes: {
        xaxis: {
            // renderer: $.jqplot.CategoryAxisRenderer,
            //  
            renderer: $.jqplot.CategoryAxisRenderer,
            ticks: ticks,
        },
        yaxis: {
            //autoscale: true,
            //label: 'Application Count',
            min: 0,
            tickInterval: 5,
            max: 50
        }
    },
    axesDefaults: {
        tickRenderer: $.jqplot.CanvasAxisTickRenderer,
        tickOptions: {
            angle: -30,
            fontSize: '10pt'
        }
    }
};

var plot = $.jqplot('chartDivId', dataArray, options);

HTML：

<div id="chartDivId"/>

有JSFiddle of this problem。

Answer 1

查找有关如何做事的文档的最佳位置是API Documentation。它包含每个组件和插件的文档以及每个组件和选项的可用选项。 [在此重申并在答案的顶部，因为我只是添加了链接。]

点标签的文档位于插件API文档中：PointLabels（plugins / jqplot.pointLabels.js）。

您可以通过添加属性hideZeros: true来删除零值标签。这意味着改变：

        pointLabels: {
            show: true,
        },

为：

        pointLabels: {
            show: true,
            hideZeros: true
        },

有working JSFiddle。

enter image description here

完整的JavaScript：

var s3 = [11, 28, 22, 47, 11, 11];
var s1 = [0, 6, 3, 0, 0, 0];
var s2 = [1, 0, 3, 0, 0, 0];
var dataArray = [s3, s1, s2];
var ticks = ['John', 'Tumm', 'Wen', 'Ken', 'Dolly'];

var options = {
    title: 'Title ',
    stackSeries: true,
    seriesColors: ["#eb4b3d", "#ffc800", "#009149"],
    seriesDefaults: {
        renderer: $.jqplot.BarRenderer,
        pointLabels: {
            show: true,
            hideZeros: true
        },
        rendererOptions: {
            barWidth: 25,
            varyBarColor: true,
        },
    },
    axes: {
        xaxis: {
            // renderer: $.jqplot.CategoryAxisRenderer,
            //  
            renderer: $.jqplot.CategoryAxisRenderer,
            ticks: ticks,
        },
        yaxis: {
            //autoscale: true,
            //label: 'Application Count',
            min: 0,
            tickInterval: 5,
            max: 50
        }
    },
    axesDefaults: {
        tickRenderer: $.jqplot.CanvasAxisTickRenderer,
        tickOptions: {
            angle: -30,
            fontSize: '10pt'
        }
    }
};

var plot = $.jqplot('chartDivId', dataArray, options);

HTML：

<div id="chartDivId"/>

Answer 2

我使用此解决方案来解决格式小时的问题

pointLabels: {
        show: true,
        formatString: '%s',
        formatter: function val(x, y) {

            //my Solution
            if (y != 0)

                return y.toString().toHHMMSS();
        },
    },

删除Jqplot堆积条形图上的零值点标签

2 个答案: