在jquery flot中显示值

Question

我使用jquery flot创建了一个条形图，并且我被要求显示条形图上方的条形图值。像我在这张图片中嘲笑红色的东西？文档不清楚如何实现这一点。有什么想法吗？

我已经包含了我在下面使用的选项。

        var options = {
            series: {
                bars: {
                    show: true,
                    dataLabels: true
                }
            },
            bars: {
                align: "center",
                barWidth: 0.5,
                horizontal: true,
                fillColor: { colors: [{ opacity: 0.5 }, { opacity: 1}] },
                lineWidth: 1
            },

            yaxis: {
                mode: "categories"
            },
            xaxis: {

            },
        valueLabels: {
               show: true
              }
        }
$.plot("#placeholder", series, options);

Answer 1

我假设你正在使用{-3}}的value-labels插件。

您可以做的是在showAsHtml:true部分设置valuesLabels选项，然后将其添加到您的CSS中：

.valueLabels {
        font-size:70%;
        color:black;
}
div.valueLabelLight {
        opacity:0.5;
        background-color: white;
        border:none;
        position:absolute;
}
div.valueLabel {
        position:absolute;
        border:none;
}

然后您可以更改这些CSS值，但是您想要更改标签的外观（例如，为color:red设置color:black而不是.valuesLabels。

此外，要添加%符号，您需要将其添加到valuesLabels：

labelFormatter: function(v){
   return v+'%';
}

所以你最终会在你的flot选项中得到这个：

    valueLabels: {
        show: true,
        align: 'center',
        showAsHtml: true,
        labelFormatter: function (v) {
            return v + '%';
        }
    },

其中一个关键因素似乎是valuesLabels的选项 series选项，而不是顶层。

在这里看到它有点工作：this version