1

Railsが気に入っているように、AMChartの純粋なjavascriptをビューから取得して、コントローラーのassets/javascripts/の.jsファイルに入れようとしています。

2 つの個別のビューに 2 つの個別のグラフがあり、それぞれ構成とデータ ソースが異なります。

私の問題は、あるビューにアクセスすると、他のビューのチャートデータを含む変数が「定義されていません」というjavascriptエラーが発生することです。このエラーの下のすべてのjavascriptは中止されます。

AMChart の JavaScript は単なる純粋な JavaScript (jquery なし) であり、コントローラーの .js ファイルで 2 つのグラフは次のようになります。

/// Radar Chart for First View

  var chart;

  AmCharts.ready(function () {
    // RADAR CHART
    chart = new AmCharts.AmRadarChart();
    chart.dataProvider = chartData_radar1;  // <- data variable
    chart.categoryField = "criteria";
    chart.startDuration = 1;
    chart.startEffect = ">";
    chart.sequencedAnimation = true;

    // VALUE AXIS
    var valueAxis = new AmCharts.ValueAxis();
    valueAxis.gridType = "circles";
    valueAxis.fillAlpha = 0.02;
    valueAxis.fillColor = "#000000"
    valueAxis.axisAlpha = 0.1;
    valueAxis.gridAlpha = 0.1;
    valueAxis.fontWeight = "bold"
    valueAxis.minimum = 0;
    valueAxis.maximum = 10;
    chart.addValueAxis(valueAxis);

    // GRAPH
    var graph = new AmCharts.AmGraph();
    graph.lineColor = "#98cdff"
    graph.fillAlphas = 0.4;
    graph.bullet = "round"
    graph.valueField = "score"
    graph.balloonText = "[[category]]: [[value]]/10"
    chart.addGraph(graph);

    // Balloon Settings
    var balloon = chart.balloon;
    balloon.adjustBorderColor = true;
    balloon.color = "#000000";
    balloon.cornerRadius = 5;
    balloon.fillColor = "#000000";
    balloon.fillAlpha = 0.7
    balloon.color = "#FFFFFF"

    // WRITE
    chart.write("chartdiv");
  });



/// Radar Chart for Second View

  var chart;

  // Draw AM Radar Chart
  AmCharts.ready(function () {
    // RADAR CHART
    chart = new AmCharts.AmRadarChart();
    chart.dataProvider = chartData_radar2;  // <- data variable
    chart.categoryField = "criteria";
    chart.startDuration = 0.3;
    chart.startEffect = ">";
    chart.sequencedAnimation = true;

    // GRAPH - FIRST 5
    var graph = new AmCharts.AmGraph();
    graph.title = "First 5";
    graph.lineColor = "#bdd523"
    graph.fillAlphas = 0.2;
    graph.bullet = "round"
    graph.valueField = "first5"
    graph.balloonText = "[[category]]: [[value]]/10"
    chart.addGraph(graph);

    // GRAPH - LAST 5
    var graph = new AmCharts.AmGraph();
    graph.title = "Last 5";
    graph.lineColor = "#98cdff"
    graph.fillAlphas = 0.2;
    graph.bullet = "round"
    graph.valueField = "last5"
    graph.balloonText = "[[category]]: [[value]]/10"
    chart.addGraph(graph);

    // VALUE AXIS
    var valueAxis = new AmCharts.ValueAxis();
    valueAxis.gridType = "circles";
    valueAxis.fillAlpha = 0.02;
    valueAxis.fillColor = "#000000"
    valueAxis.axisAlpha = 0.1;
    valueAxis.gridAlpha = 0.1;
    valueAxis.fontWeight = "bold"
    valueAxis.minimum = 0;
    valueAxis.maximum = 10;
    chart.addValueAxis(valueAxis);

    // Balloon Settings
    var balloon = chart.balloon;
    balloon.adjustBorderColor = true;
    balloon.color = "#000000";
    balloon.cornerRadius = 5;
    balloon.fillColor = "#000000";
    balloon.fillAlpha = 0.7
    balloon.color = "#FFFFFF"

    // Legend Settings
    var legend = new AmCharts.AmLegend();
    legend.position = "bottom";
    legend.align = "center";
    legend.markerType = "square";
    legend.rollOverGraphAlpha = 0;
    legend.horizontalGap = 5;
    legend.valueWidth = 5;
    legend.switchable = false;
    chart.addLegend(legend);

    // WRITE
    chart.write("chart_radar");
  });

(モデルから js メソッドにデータを取得するより良い方法がないため、ビューで「chartData_radar1」または「chartData_radar2」(上記の 7 行目などで呼び出されます) を定義します)

:javascript
  var chartData_radar1 = #{Case.chart_analysis_radar(current_user)};

これを機能させるためのハック/回避策をあまり探していませんが、アセットパイプラインでこのような純粋なjavascriptを処理するRailsの方法は何ですか? ビュー自体に配置することなく、ビューに応じて1つのレーダーのjavascriptのみをロードする良い方法はありますか? Jqueryセレクターを使用すると、javascriptの一部を選択的にロードできることを知っています。たとえば、これをすべてjqueryセレクターにパッケージ化できますか?

どんな助けでも大歓迎です！

4

1 に答える 1