Jquery 重复数字时绘制错误图形

Question

我收到此消息：[[8,2],[13,1],[17,1],[18,1],[7,1]] 在 ajax 呼叫中并将其传递给 jquery flot。

问题是图表开始于 [7,1] 它应该开始于 [8,2] 并结束于 [7,1] 但它不是并且它导致了一个奇怪的图表：

这是我的脚本：

$.ajax({
        url: "{{ URL::to('/ajaxcall') }}",
        method: 'GET',
        dataType: 'json',
        success: onOutboundReceived
    });

    function onOutboundReceived(series) {
        var series = series;
        //$.plot($('#site_tay'), finalData, options);
        var plot_statistics = $.plot($("#site_tay"), [{
            data: series,
            label: "Cotizaciones"
        }
        ], {
            series: {
                lines: {
                    show: true,
                    lineWidth: 2,
                    fill: true,
                    fillColor: {
                        colors: [{
                            opacity: 0.2
                        }, {
                            opacity: 0.01
                        }
                        ]
                    }
                },
                points: {
                    show: true
                },
                shadowSize: 2
            },
            legend:{
                show: false
            },
            grid: {
                labelMargin: 10,
                axisMargin: 500,
                hoverable: true,
                clickable: true,
                tickColor: "rgba(255,255,255,0.22)",
                borderWidth: 0
            },
            colors: ["#FFFFFF", "#4A8CF7", "#52e136"],
            xaxis: {
                ticks: 11,
                tickDecimals: 0
            },
            yaxis: {
                ticks: 5,
                tickDecimals: 0
            }
        });
        $("#site_tay").bind("plothover", function (event, pos, item) {

            var str = "(" + pos.x.toFixed(2) + ", " + pos.y.toFixed(2) + ")";

            if (item) {
                if (previousPoint != item.dataIndex) {
                    previousPoint = item.dataIndex;
                    $("#tooltip").remove();
                    var x = item.datapoint[0],
                            y = item.datapoint[1];
                    showTooltip(item.pageX, item.pageY,
                            item.series.label + " del dia " + x + " = " + y);
                }
            } else {
                $("#tooltip").remove();
                previousPoint = null;
            }
        });
        function showTooltip(x, y, contents) {
            $("<div id='tooltip'>" + contents + "</div>").css({
                position: "absolute",
                display: "none",
                top: y + 5,
                left: x + 5,
                border: "1px solid #000",
                padding: "5px",
                'color':'#fff',
                'border-radius':'2px',
                'font-size':'11px',
                "background-color": "#000",
                opacity: 0.80
            }).appendTo("body").fadeIn(200);
        }
    }

我该如何解决这个问题？

Answer 1

该图是 "starting" 上的 7，因为 7 是您数据中的最小 x 值，并且 x 轴的顺序与自然数相同。

如果您的 x 值不应被视为数字，请使用类别插件（请参阅此 fiddle）：

xaxis: {
    mode: 'categories'
},

Jquery 重复数字时绘制错误图形

Jquery Flot wrong graph when repeating number

javascript

jquery

flot