jquery - 流程图值标签消失

Question

当图表的不同 x 轴具有相同值时，某些值标签会消失

当图表接收到多个 xaxis 的相同值时，valueLabels 会消失。我为“Out”X 轴输入了相同的值。请帮助我找到一种方法来防止图表中的值消失。

CLICK HERE FOR SCREENSHOT

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"] }
    }
});

<小时/>

The above mentioned hack is not working. Still the issue appears. 1st bar NET - 40 2nd bar NET - 400 3rd bar NET - 450 4th bar NET - 450 5th bar NET - 450 6th bar NET - 750 7th bar NET - 150 8th bar NET - 250 The 3rd, 4th and 5th bar "NET" value contains 450. But only 5th bar appears the value label. I have attached the json below. Thanks.

{
        "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;
     }
}, 

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