Flot圖不繪製數據

Question

我試圖用flot圖來繪製一些信息，但是我無法讓這些值出現在圖上。此代碼是包含在模板中的演示文件的一部分，因此我已將其修改爲繪製數據而不是使用隨機數值，我沒有收到任何錯誤，但圖表無法正常工作，並希望有人能指出我在正確的方向。

我的代碼是在這裏：

init: function() 
    { 
     // apply styling 
     charts.utility.applyStyle(this); 

     this.plot = $.plot(
      $("#chart_simple"), 
      [{ 
       label: "Jobs", 
       data: this.data.d1, 
       lines: {fillColor: "#dd3333"}, 
       points: {fillColor: "#dd3333"} 
      }, 
      { 
       label: "Resumes", 
       data: this.data.d2, 
       lines: {fillColor: "#282b30"}, 
       points: {fillColor: "#282b30"} 
      }], this.options); 
    } 
}, 

// lines chart with fill & without points 
chart_lines_fill_nopoints: 
{ 

    // chart data 
    data: 
    { 
     d1: [[1,100], [2,150], [3,100]], 
     d2: [[1,100], [2,150], [3,100]] 
    }, 

    // will hold the chart object 
    plot: null, 

    // chart options 
    options: 
    { 
     grid: { 
      show: true, 
      aboveData: true, 
      color: "#3f3f3f", 
      labelMargin: 5, 
      axisMargin: 0, 
      borderWidth: 0, 
      borderColor:null, 
      minBorderMargin: 5 , 
      clickable: true, 
      hoverable: true, 
      autoHighlight: true, 
      mouseActiveRadius: 20, 
      backgroundColor : { } 
     }, 
     series: { 
      grow: {active:false}, 
      lines: { 
       show: true, 
       fill: true, 
       lineWidth: 2, 
       steps: false 
      }, 
      points: {show:false} 
     }, 
     legend: { position: "nw" }, 
     yaxis: { min: 0 }, 
     xaxis: {ticks:11, tickDecimals: 0}, 
     colors: [], 
     shadowSize:1, 
     tooltip: true, 
     tooltipOpts: { 
      content: "%s : %y.0", 
      shifts: { 
       x: -30, 
       y: -50 
      }, 
      defaultTheme: false 
     } 
    }, 

Answer 1

所以，挖了一下，我看到你使用的是來自here的javascript。看着工作示例here，你打破他們的代碼在以下幾個方面：

1）你似乎不再有父charts對象，所以

charts.utility.applyStyle（本）;

不會工作。

2.）init函數是chart_lines_fill_nopoints對象的一部分，在您的剪切/粘貼代碼中，它不再是了。

3.）在您的示例代碼中，您實際上永遠不會調用init函數來繪製圖。

4.）optionsbackgroundColor : { }對於flot無效（可能這是缺少的charts.utility.applyStyle的一部分）。

考慮到所有這些使代碼正常工作的here's a fiddle。

使用上面的代碼生成flot plot會感到不必要的複雜。使用這些模板時可能有意義，但如果你只是用這個例子來說明如何調用flot，它並不是非常簡單。

此外，請您在下次發佈問題時，包括所有相關信息（例如您在哪裏找到此代碼以及如何更改它）。從上下文中脫離出來，這段代碼沒什麼意義。

Answer 2

此代碼工作

//Defining data for the chart 

var data= 
{ 
    d1: [[1,100], [2,150], [3,100]], 
    d2: [[1,100], [2,150], [3,100]] 
}; 

//Defining options for the chart 
var options= 
{ 
    grid: { 
     show: true, 
     aboveData: true, 
     color: "#3f3f3f", 
     labelMargin: 5, 
     axisMargin: 0, 
     borderWidth: 0, 
     borderColor:null, 
     minBorderMargin: 5 , 
     clickable: true, 
     hoverable: true, 
     autoHighlight: true, 
     mouseActiveRadius: 20, 
     backgroundColor : { } 
    }, 
    series: { 
     grow: {active:false}, 
     lines: { 
      show: true, 
      fill: true, 
      lineWidth: 2, 
      steps: false 
     }, 
     points: {show:false} 
    }, 
    legend: { position: "nw" }, 
    yaxis: { min: 0 }, 
    xaxis: {ticks:11, tickDecimals: 0}, 
    colors: [], 
    shadowSize:1, 
    tooltip: true, 
    tooltipOpts: { 
     content: "%s : %y.0", 
     shifts: { 
      x: -30, 
      y: -50 
     }, 
     defaultTheme: false 
    }}; 

// shorthand for document.ready 
$(function(){ 

    this.plot = $.plot(
     $("#chart_simple"), 
     [{ 
      label: "Jobs", 
      data: data.d1, 
      lines: {fillColor: "#dd3333"}, 
      points: {fillColor: "#dd3333"} 
     }, 
     { 
      label: "Resumes", 
      data: data.d2, 
      lines: {fillColor: "#282b30"}, 
      points: {fillColor: "#282b30"} 
     }], this.options); 
}); 

檢查出的jsfiddle工作實例here。