爲Ruby on Rails重構HighChart配置的重構

Question

我使用HighChart：api.highcharts.com/插件來支持和處理我的Ruby on Rails應用程序中的線圖。

我有4個不同的線圖在4個不同的js.erb文件。

除計算數據外，所有圖具有相同的樣式/配置。

 var seriesOptions = [], 
       yAxisOptions = [], 
       seriesCounter = 0, 
       names = <%= raw get_engagement_data(@user,params[:provider],params[:type]) %>; 

     $.each(names, function(i, name) { 

      seriesOptions[i] = { 
       type: 'areaspline', 
       lineColor: getColor[name[2]], 
       lineWidth: 2, 
       pointInterval: 24 * 3600 * 1000, 
       name: name[0], 
       data: name[1], 
       fillColor: getLighterColor[name[2]], 
       fillOpacity: 1, 
       marker: { 
        enabled: false, 
        fillColor: getColor[name[2]] 
       } 
      }; 

      // As we're loading the data asynchronously, we don't know what order it will arrive. So 
      // we keep a counter and create the chart when all the data is loaded. 
      seriesCounter++; 

      if (seriesCounter == names.length) { 
       createChart(); 
      } 
     }); 

     // create the chart when all data is loaded 
     function createChart() { 

      $('#engagement_chart').highcharts('StockChart', { 
       chart: { 
       }, 

       rangeSelector: { 
        enabled: false 
       }, 
       scrollbar: { 
        enabled: false 
       }, 
       credits: { 
        enabled: false 
       }, 
       navigator: { 
        maskFill: '#3ebca6', 
        height: 10, 
        margin: 25, 
        outlineColor: '#3ebca6', 
        outlineWidth: 5, 
        series: { 
         color: '#3ebca6' 
        }, 
        xAxis: { 
         labels: { 
          enabled: false 
         } 
        } 
       }, 
       xAxis: { 
        type: 'datetime', 
        dateTimeLabelFormats: { 
         second: '%b<br>%Y', 
          minute: '%b<br>%Y', 
         hour: '%b<br>%Y', 
         day: '%b %e<br>%Y', 
         week: '%b<br>%Y', 
         month: '%b<br>%Y', 
         year: '%Y' 
        }, 
        labels: { 
         style: { 
          color: '#27303a', 
          fontFamily: 'Helvetica Neue', 
          fontSize: '12px' 
         } 
        } 
       }, 
       yAxis: { 
        min: 0, 
        startOnTick: true, 
        gridLineColor: '#f0f0f1', 
        gridLineWidth: "1px", 
         offset: 60, 
        labels: { 
         style: { 
          color: '#27303a', 
          fontFamily: 'Helvetica Neue', 
          fontSize: '12px' 
         } 
        } 
       }, 
       plotOptions: { 
        padding: "10px", 
        series: { 
         fillOpacity: 1 
        } 
       }, 

       tooltip: { 
        pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b><br/>' 
       }, 

       series: seriesOptions 
      }); 
     } 

我試圖創建一個單獨的文件/assets/javascripts/graph.js

graph.js

 function ColorTheDonuts(){ 
     chart: { 
       }, 

       rangeSelector: { 
        enabled: false 
       }, 
       scrollbar: { 
        enabled: false 
       }, 
       credits: { 
        enabled: false 
       }, 
       navigator: { 
        maskFill: '#3ebca6', 
        height: 10, 
        margin: 25, 
        outlineColor: '#3ebca6', 
        outlineWidth: 5, 
        series: { 
         color: '#3ebca6' 
        }, 
        xAxis: { 
         labels: { 
          enabled: false 
         } 
        } 
       }, 
       xAxis: { 
        type: 'datetime', 
        dateTimeLabelFormats: { 
         second: '%b<br>%Y', 
          minute: '%b<br>%Y', 
         hour: '%b<br>%Y', 
         day: '%b %e<br>%Y', 
         week: '%b<br>%Y', 
         month: '%b<br>%Y', 
         year: '%Y' 
        }, 
        labels: { 
         style: { 
          color: '#27303a', 
          fontFamily: 'Helvetica Neue', 
          fontSize: '12px' 
         } 
        } 
       }, 
       yAxis: { 
        min: 0, 
        startOnTick: true, 
        gridLineColor: '#f0f0f1', 
        gridLineWidth: "1px", 
         offset: 60, 
        labels: { 
         style: { 
          color: '#27303a', 
          fontFamily: 'Helvetica Neue', 
          fontSize: '12px' 
         } 
        } 
       }, 
       plotOptions: { 
        padding: "10px", 
        series: { 
         fillOpacity: 1 
        } 
       }, 
     } 

我把我的一些CONFIGS的存在，但JS沒有工作。

有什麼建議嗎？任何解決方法將不勝感激。謝謝

Answer 1

你們很近。在JavaScript語法是在你的ColorTheDonuts功能不正確：

function ColorTheDonuts(){ 
    return { 
     chart: {}, 
     rangeSelector: { 
      enabled: false 
     }, 
     scrollbar: { 
      enabled: false 
     }, 
     credits: { 
      enabled: false 
     }, 
     navigator: { 
      maskFill: '#3ebca6', 
      height: 10, 
      margin: 25, 
      outlineColor: '#3ebca6', 
      outlineWidth: 5, 
      series: { 
       color: '#3ebca6' 
      }, 
      xAxis: { 
       labels: { 
        enabled: false 
       } 
      } 
     }, 
     xAxis: { 
      type: 'datetime', 
      dateTimeLabelFormats: { 
       second: '%b<br>%Y', 
       minute: '%b<br>%Y', 
       hour: '%b<br>%Y', 
       day: '%b %e<br>%Y', 
       week: '%b<br>%Y', 
       month: '%b<br>%Y', 
       year: '%Y' 
      }, 
      labels: { 
       style: { 
        color: '#27303a', 
        fontFamily: 'Helvetica Neue', 
        fontSize: '12px' 
       } 
      } 
     }, 
     yAxis: { 
      min: 0, 
      startOnTick: true, 
      gridLineColor: '#f0f0f1', 
      gridLineWidth: "1px", 
      offset: 60, 
      labels: { 
       style: { 
        color: '#27303a', 
        fontFamily: 'Helvetica Neue', 
        fontSize: '12px' 
       } 
      } 
     }, 
     plotOptions: { 
      padding: "10px", 
      series: { 
       fillOpacity: 1 
      } 
     } 
    }; 
} 

要使用：

$('#engagement_chart').highcharts('StockChart', ColorTheDonuts());