嵌入式紅寶石不能在highcharts工作

我在Highcharts和Rails上看到RailsCast＃223，當我嘗試一個簡單的for循環和一個哈希循環時，圖表甚至沒有渲染。我正在嘗試開始使用可變數量的系列。靜態系列的作品。對於HighCharts嵌入式紅寶石不能在highcharts工作

原始代碼示例

$('#container').highcharts({ 
    chart: { 
     type: 'column' 
    }, 
    title: { 
     text: 'Stacked column chart' 
    }, 
    xAxis: { 
     categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas'] 
    }, 
    yAxis: { 
     min: 0, 
     title: { 
      text: 'Total fruit consumption' 
     }, 
     stackLabels: { 
      enabled: true, 
      style: { 
       fontWeight: 'bold', 
       color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray' 
      } 
     } 
    }, 
    legend: { 
     align: 'right', 
     x: -100, 
     verticalAlign: 'top', 
     y: 20, 
     floating: true, 
     backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColorSolid) || 'white', 
     borderColor: '#CCC', 
     borderWidth: 1, 
     shadow: false 
    }, 
    tooltip: { 
     formatter: function() { 
      return '<b>'+ this.x +'</b><br/>'+ 
       this.series.name +': '+ this.y +'<br/>'+ 
       'Total: '+ this.point.stackTotal; 
     } 
    }, 
    plotOptions: { 
     column: { 
      stacking: 'normal', 
      dataLabels: { 
       enabled: true, 
       color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white' 
      } 
     } 
    }, 
    series: [{ 
     name: 'John', 
     data: [5, 3, 4, 7, 2] 
    }, { 
     name: 'Jane', 
     data: [2, 2, 3, 2, 1] 
    }, { 
     name: 'Joe', 
     data: [3, 4, 4, 2, 5] 
    }]  
});

下方堆疊列直是我嵌入的Ruby剛剛得到的東西的工作開始之前，我從DB拉動。它只是一個簡單的for循環來創建幾個系列，並沒有什麼奇特之處。當我重新運行該圖表時，該圖表不會在瀏覽器中呈現。注意：腳本位於app/assets/javascripts文件project.js中，位於$(function() {區塊中。

series: [   
    <% xarray = [1, 2, 3, 4, 5] %> 
    <% for x in xarray %> 
    { 
    name: "<%= x %>", 
    data: [5, 3, 4, 7, 2] 
    } 
    <% end %>

這裏是新的文件show.js.erb

$(function() { 
    $('#container').highcharts({ 
     chart: { 
      type: 'column' 
     }, 
     title: { 
      text: 'Resource Load by Project' 
     }, 
     xAxis: { 
      categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas'] 
     }, 
     yAxis: { 
      min: 0, 
      title: { 
       text: 'Total hours worked' 
      }, 
      stackLabels: { 
       enabled: true, 
       style: { 
        fontWeight: 'bold', 
        color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray' 
       } 
      } 
     }, 
     legend: { 
      align: 'right', 
      x: -100, 
      verticalAlign: 'top', 
      y: 20, 
      floating: true, 
      backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColorSolid) || 'white', 
      borderColor: '#CCC', 
      borderWidth: 1, 
      shadow: false 
     }, 
     tooltip: { 
      formatter: function() { 
       return '<b>'+ this.x +'</b><br/>'+ 
        this.series.name +': '+ this.y +'<br/>'+ 
        'Total: '+ this.point.stackTotal; 
      } 
     }, 
     plotOptions: { 
      column: { 
       stacking: 'normal', 
       dataLabels: { 
        enabled: true, 
        color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white' 
       } 
      } 
     }, 
     series: [ 
      <% arr = [1, 2, 3, 4, 5] %> 
      <% for arrr in arr %> 
      { 
      name: <%= arrr %>, 
      data: [5, 3, 4, 7, 2] 
      } 
      <% end %> 
     ] 

    }); 
});

來源

2013-04-08 user2241394

什麼是您在其中放置紅寶石代碼的文件的擴展名 – Jashwant 2013-04-08 19:01:16

該文件是app/assets/javascripts/project.js – user2241394 2013-04-08 19:02:05

重命名爲'project.js.erb'並重試。 Ruby不解析沒有'erb'擴展名的文件 – Jashwant 2013-04-08 19:02:40

我有同樣的問題。主要問題是在這條線上

name: <%= arrr %>,

這是錯的。正確的將是

name: "<%= arrr %>",

檢查區別。這是"。檢查瑞恩的railscasts。

來源

2015-12-04 17:48:54 Anwar

嵌入式紅寶石不能在highcharts工作

回答

相關問題