Question

当图表具有相同的不同x轴值

时，某些值标签会消失

当图表收到多个xaxis的相同值时，valueLabel消失。我为＆＃34; Out＆＃34;输入了相同的值。 X轴。请帮我找到一种方法来防止图表中的值消失。

var dataset = [{
    data: [
        [1391279400000, -1525],
        [1391365800000, -1525],
        [1391452200000, -1525],
        [1391538600000, -1525],
        [1391625000000, -1525],
        [1391711400000, -1525],
        [1391797800000, -1525],
        [1391884200000, -1525],
        [1391970600000, -1525],         
        [1392057000000, -1525],
        [1392143400000, -1525],
        [1392229800000, -1525],
        [1392316200000, -1525],
        [1392402600000, -1525],
        [1392489000000, -1525],
        [1392575400000, -1525],
        [1392661800000, -1525],
        [1392748200000, -1525],
        [1392834600000, -1525]
    ],
    color:'#9D538E',
    label: "Out"
},
{
    data: [
        [1391279400000, 3221],
        [1391365800000, 2496],
        [1391452200000, 1050],
        [1391538600000, 3221],
        [1391625000000, 1050],
        [1391711400000, 3221],
        [1391797800000, 2496],
        [1391884200000, 1050],
        [1391970600000, 2221],      
        [1392057000000, 1050],
        [1392143400000, 3221],
        [1392229800000, 2496],
        [1392316200000, 1050],
        [1392402600000, 3221],
        [1392489000000, 1050],
        [1392575400000, 3221],
        [1392661800000, 2496],
        [1392748200000, 1050],
        [1392834600000, 2221]
    ],
    color:'#702BD7',
    label: "Intake"
}, {
    data: [
        [1391279400000, 1000],
        [1391365800000, -1000],
        [1391452200000, -475],
        [1391538600000, 1000],
        [1391625000000, -475],
        [1391711400000, 1000],
        [1391797800000, -1000],
        [1391884200000, -475],
        [1391970600000, 1000],          
        [1392057000000, -475],
        [1392143400000, 1000],
        [1392229800000, -1000],
        [1392316200000, -475],
        [1392402600000, 1000],
        [1392489000000, -475],
        [1392575400000, 1000],
        [1392661800000, -1000],
        [1392748200000, -475],
        [1392834600000, 1000]
    ],
    color:'#2082F2',
    label: "Net"
}];

$.plot("#placeholder", dataset, {
    xaxis: {
        mode: 'time',   
        timeformat: "%m/%d/%y",
        tickSize: [1, "day"],   
        min: ranges.xaxis.from,
        max: ranges.xaxis.to,
    }, 
    series: {
        bars: {
            fill: 1,
            show: true,                     
            barWidth: 100*100*4000,
        },
        valueLabels: { 
            show: true,
            showAsHtml: true,                   
        },                  
    }, 
    grid: {
        hoverable: true,
        clickable: true,
        borderWidth: 2,       
        markings: [ { yaxis: { from: 0, to: 0 }, color: "#fff" }],
        backgroundColor: { colors: ["#000000", "#000000"] }
    }
});

enter image description here

上面提到的hack无效。问题仍然存在。第一酒吧NET - 40 第二酒吧NET - 400 第3酒吧NET - 450 第4酒吧NET - 450 第五酒吧NET - 450 第6酒吧NET - 750 7日酒吧NET - 150 第8酒吧NET - 250 第3，第4和第5吧＆＃34; NET＆＃34; value包含450.但只有第5个条显示值标签。我附上了json。感谢。

{
        "observations": {
            "chartName": "bar",
            "awareBarChartData": [{
                "data": [
                    [1393612200000, "-4500"],
                    [1393698600000, "-2500"],
                    [1393785000000, "-900"],
                    [1394044200000, "-550"],
                    [1393266600000, "-9000"],
                    [1393353000000, "-1500"],
                    [1393439400000, "-4500"],
                    [1393525800000, "-4500"]
                ],
                "label": "OUT",
                "color": "#9D538E"
            }, {
                "data": [
                    [1393612200000, "1300"],
                    [1393698600000, "1000"],
                    [1393785000000, "875"],
                    [1394044200000, "650"],
                    [1393266600000, "4950"],
                    [1393353000000, "950"],
                    [1393439400000, "1300"],
                    [1393525800000, "1300"]
                ],
                "label": "INTAKE",
                "color": "#702BD7"
            }, {
                "data": [
                    [1393612200000, "450"],
                    [1393698600000, "750"],
                    [1393785000000, "150"],
                    [1394044200000, "250"],
                    [1393266600000, "40"],
                    [1393353000000, "400"],
                    [1393439400000, "450"],
                    [1393525800000, "450"]
                ],
                "label": "NET",
                "color": "#2082F2"
            }],![enter image description here][2]
            "id": null,
            "voided": false,
            "uuid": "5f647bdb-dd22-49c1-a742-6dc3aa82abe8"
        }
    }

Answer 1

如果你看source of the plugin（第82行），就是这样：

val = "" + val;
val = labelFormatter(val);

if (val != last_val || i == series.data.length - 1) {

    <snip>
    last_val = val;

因此，该插件的作者似乎故意跳过重复值（没有评论为什么）。

所以，你有3个选项，1。）更改插件的源代码，2。）放弃插件并自己标记或3.）破解这样的修复：

valueLabels: { 
     show: true,
     showAsHtml: true,  
     labelFormatter:  function(v) {
         if (v == this.lastVal){ // if the last value is the same as this one
             v += ' ';  // make in unique
         }
         this.lastVal = v; // remember last value
         return v;
     }
},

这将保留最后一个值的状态并用空格填充它以确保它在插件循环遍历值时不同。

Answer 2

最新版本的valueLabels插件中有一个选项，现在名为＆＃39; hideSame＆＃39;。将其设置为false将显示重复值。

{
    hideSame: false
}

Flot chart valueLabels消失

当图表具有相同的不同x轴值

2 个答案: