我试图将我的AMChart纯JavaScript从我的视图中提取出来,并放入控制器的Assets / javascripts /中的.js文件中,正如Rails所喜欢的。

我在两个单独的视图上有两个单独的图表,每个视图具有不同的配置和数据源。

我的问题是,当访问一个视图时,我收到一个JavaScript错误,说包含未定义另一视图的图表数据的变量-此错误下面的所有JavaScript都将中止。

AMChart javascript只是纯javascript(没有jquery),在我的控制器的.js文件中的两个图表看起来像这样:

/// 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方法是什么?有没有一种好方法,仅根据视图加载一个雷达的javascript,而不必将其放在视图本身中?我知道如果您使用Jquery选择器,则可以有选择地加载部分JavaScript,例如以某种方式将所有这些打包在jquery选择器中?

任何帮助将非常感激!

最佳答案

即使这个问题已经很老了,我也会尝试回答-可能会对某人有所帮助。

本质上,您要做的是通过全局变量将数据从Rails视图或控制器发送到Javascript:

:javascript
    window.chartData = #{JSON.stringify(@your_data)};


然后,在assets/javascripts/中的任何JS文件中,您都可以访问此变量。但是,请确保在页面加载后访问它(因此,请使用jQuery的$( document ).ready( function() { ... } )window.onload = ...,如果您不使用jQuery):

$( document ).ready( function() {
    ...
    var chart = new AmCharts.AmRadarChart();
    chart.dataProvider = window.chartData;
    ...
});


要么

window.onload = function () {
    ...
    var chart = new AmCharts.AmRadarChart();
    chart.dataProvider = window.chartData;
    ...
};


您也可以更进一步。您可以将以下内容直接添加到布局中:

:javascript
    window.config = #{JSON.stringify(@js_config || {})};


然后,在任何控制器方法中,您所需要做的就是:

@js_config[:chart_data] = some_chart_data


现在,您可以使用任何JavaScript访问此代码:

console.log(window.config.chart_data)


在这种情况下,是否需要等待页面加载取决于您是在头还是主体中定义配置变量。

09-10 22:43
查看更多