2016-06-30 61 views
0

基本上,我使用MySQL中的AJAX提取數據來繪製折線圖。 現在我想根據數據爲線圖上的點添加不同的顏色。如果數據落在範圍內,它將是不同的顏色和範圍,它將是不同的顏色。有人請建議或指導。下面使用的代碼:Flot Chart - 基於數據點的單線圖上的不同顏色

我已經嘗試使用Flot閾值插件,它可用下面,但它不工作。

var offset = 0; 
//plot(html); 
var options = { 
    colors: ["#3fcf7f"], 
    threshold: { 
     below: 200, 
     colors: ["#ff7070"] 
    }, 
    series: { 
     lines: { 
      show: true, 
      lineWidth: 1, 
      fill: true, 
      fillColor: { 
       colors: [{ 
        opacity: 0.0 
       }, { 
        opacity: 0.2 
       }] 
      }, 
     }, 
     points: { 
      radius: 5, 
      show: true 
     }, 
     shadowSize: 2 
    }, 
    grid: { 
     color: "#fff", 
     hoverable: true, 
     clickable: true, 
     tickColor: "#f0f0f0", 
     borderWidth: 0 
    }, 
    //colors: ["#ff7070"], 
    xaxis: { 
     mode: 'time', 
     timeformat: '%d/%m/%y', 
     //rotateTicks: 90 
    }, 
    yaxis: { 
     ticks: 5, 
     tickDecimals: 0, 
    }, 
    tooltip: true, 
    tooltipOpts: { 
     content: "%y.1 on %x.4", 
     defaultTheme: false, 
     shifts: { 
      x: 0, 
      y: 20 
     } 
    } 
}; 
console.log(html.data); 
console.log(html.data[0][0]); 
data.push(html); 
// A null signifies separate line segments 

$.plot("#flot-color", data, options); 

回答

0

沒有colors屬性和colorthreshold性質所屬的series屬性裏面。改變你的選項是:

var options = { 
    series: { 
     color: "#3fcf7f", 
     threshold: { 
      below: 200, 
      color: "#ff7070" 
     }, 
     lines: { 
     ... 

Fiddle顯示工作表。

+0

已經嘗試過顏色。它在任何情況下都不起作用 – prashantsudeep

+0

@prashantsudeep請參閱已編輯的答案,還有另一個錯誤。 – Raidri

相關問題