2014-10-05 133 views
0

当我更改图中一条线的颜色时,图例不会以相同的颜色更新。它与默认颜色保持一致。我需要做些什么来更新图例中的颜色以显示与图形相同的颜色?Flotr2,颜色在图上更改,图例不更新

代码和jsfiddle都是相同的例子。

http://jsfiddle.net/ye0ny57j/

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <title>Flotr2 </title> 

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
    <script language="javascript" type="text/javascript" src="js/flotr2.min.js"></script> 
</head> 
<body> 
    <div id="container" style="width:840px;height:400px"></div> 
    <script> 

     var d1 = [[0, 3], [4, 8], [8, 5], [9, 13]], // First data series 
       d2 = [],        // Second data series 
       i, graph; 

     var container = document.getElementById('container'); 

     // Generate first data set 
     for (i = 0; i < 14; i += 0.5) { 
      d2.push([i, Math.sin(i)]); 
     } 

     // Draw Graph 
     graph = Flotr.draw(container, 
       [{"label": "d1", "lines": {"lineWidth": "1", "color": "#f00"}, "data": d1}, {"label": "d2", "data": d2}], { 
        title: "Flotr2 test", 
        subtitle: "Subtitle", 
        xaxis: { 
         minorTickFreq: 4 
        }, 
        grid: { 
         minorVerticalLines: true 
        }, 
        legend: { 
         position: 'ne' 
        } 
       }); 
    </script> 

回答

0

你只改变线的颜色代码:

{"label" : "d1","lines" : {"lineWidth" : "1", "color" : "#f00"}, "data" : d1}

尝试更改数据集的颜色:

{"label": "d1", "lines": {"lineWidth": "1"}, "data": d1, "color": "#F00"}

S ee:http://jsfiddle.net/ye0ny57j/9/