jQuery Flot多线图自身绘图

我正在尝试使用flot将线绘制到折线图上。我走到那里一半，两条线画在图表上，但它们互相拼凑在一起。我试图复制另一个工作，但交换了值并得到了类似的结果。jQuery 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>

来源

2014-09-02 Seán McCabe

您的数据排列顺序不同。这可能是问题所在。如果不是，请提供[小提琴]（http://jsfiddle.net），以显示您的问题。 – Raidri 2014-09-02 06:31:18

是的，你可以请一个小提琴或至少一张照片ilustrating问题？欢呼声 – Margo 2014-09-02 10:37:56

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

{ 
    xaxis: { 
     mode: 'categories' 
    } 
    }

中的选项对象。

其次，@Raidri提示flot只是按照您给出的顺序绘制数据（因此线条“向后移动”）。您需要对数据进行排序和质量控制。我想你的意思是：

// 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。

来源

2014-09-02 15:45:03 Mark

谢谢，这是数据，排序。简直不敢相信我很愚蠢，无法让类别错误。很显然，这样做的时间太长了。 – 2014-09-03 23:10:41

jQuery Flot多线图自身绘图

回答

相关问题