Question

我试图使用flot将线条绘制到折线图上。我到了中途，两条线画在图表上，但它们互相拼写。我试图复制另一个有效的工作，但是交换价值并得到类似的结果。

谁能告诉我我做错了什么？

<script type="text/javascript">
var Graphs = function () {

return {

    //main function

    initCharts: function () {
        if (!jQuery.plot) {
            return;
        }

        function showChartTooltip(x, y, xValue, yValue) {
            $('<div id="tooltip" class="chart-tooltip">' + yValue + '<\/div>').css({
                position: 'absolute',
                display: 'none',
                top: y - 40,
                left: x - 40,
                border: '0px solid #ccc',
                padding: '2px 6px',
                'background-color': '#fff'
            }).appendTo("body").fadeIn(200);
        }

        var data = [];

        // random data generator for plot charts

        if ($('#site_revenue').size() != 0) {
            //site revenue
            var previousPoint2 = null;
            $('#site_revenue_loading').hide();
            $('#site_revenue_content').show();

    var data1 = [
    ['Sep', 1061.93],
['Oct', 2865.28],
['Nov', 0.00], 
['Dec', 4129.21], 
['Jan', 6021.44],
['Mar', 2289.62],
['Mar', 2289.62],
['Apr', 1561.96],
['May', 1839.25],
['Jun', 937.00],
['Jul', 921.35],
['Aug', 6653.98],
                ];

            var data2 = [
['Sep', 0.00],
['Aug', 6653.98],
['Jul', 921.35],
['Jun', 937.00],
['May', 1839.25],
['Apr', 1561.96],
['Mar', 2289.62],
['Feb', 2661.91],
['Jan', 6021.44],
['Dec', 4129.21],
['Nov', 0.00],
['Oct', 2865.28],
                ];

            var plot_statistics = $.plot($("#site_revenue"),

                [{
                    data: data1,
                    color: ['#BAD9F5'],
                    label: "Revenue", 
                    points: {
                        fillColor: "#9ACAE6",
                    },
                    shadowSize: 1
                }, {
                    data: data2,
                    color: ['#d12610'],
                    label: "Revenue Rev",
                    points: {
                        fillColor: "#d12610",
                    },
                     shadowSize: 1
                }]


                );

            var previousPoint2 = null;
            $("#site_revenue").bind("plothover", function (event, pos, item) {
                $("#x").text(pos.x.toFixed(2));
                $("#y").text(pos.y.toFixed(2));
                if (item) {
                    if (previousPoint2 != item.dataIndex) {
                        previousPoint2 = item.dataIndex;
                        $("#tooltip").remove();
                        var x = item.datapoint[0].toFixed(2),
                            y = item.datapoint[1].toFixed(2);
                        showTooltip(item.pageX, item.pageY, item.datapoint[0], '$' + item.datapoint[1]);
                    }
                } else {
                    $("#tooltip").remove();
                    previousPoint = null;
                }
            });

            $('#site_revenue').bind("mouseleave", function () {
                $("#tooltip").remove();
            });
        }
    }

};

}();
</script>

Answer 1

首先我假设你使用的是类别插件？你需要：

  {
    xaxis: {
      mode: 'categories'
    }
  }

选项对象中的

。

其次，正如@Raidri暗示flot只是按照你给它的顺序绘制你的数据（因此行＆＃34;向后＆＃34;）。由您来排序和质量数据。我想你的意思是：

// this was properly sorted
var data1 = [
  ['Sep', 1061.93],
  ['Oct', 2865.28],
  ['Nov', 0.00], 
  ['Dec', 4129.21], 
  ['Jan', 6021.44],
  ['Feb', 2289.62], // this was a duplicate 'Mar', did you mean 'Feb'?
  ['Mar', 2289.62],
  ['Apr', 1561.96],
  ['May', 1839.25],
  ['Jun', 937.00],
  ['Jul', 921.35],
  ['Aug', 6653.98]
];

// I sorted this
var data2 = [
  ['Sep', 0.00],
  ['Oct', 2865.28],
  ['Nov', 0.00],
  ['Dec', 4129.21],
  ['Jan', 6021.44],
  ['Feb', 2661.91],
  ['Mar', 2289.62],
  ['Apr', 1561.96],
  ['May', 1839.25],
  ['Jun', 937.00],
  ['Jul', 921.35],
  ['Aug', 6653.98]
];

最后，在使用类别插件时，我会确保在每个系列中都表示所有类别。如果您缺少特定系列中某些类别的值，请插入nulls。

这是一个固定的example。

jQuery Flot多线图绘制自己

1 个答案: