1

我正在尝试将我的 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 选择器中吗？

任何帮助将非常感激！

4

1 回答 1

0

尽管这个问题已经很老了，但我会尝试回答 - 可能会对某人有所帮助。

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

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

然后在你的任何 JS 文件中assets/javascripts/你都可以访问这个变量。但是，请确保您在页面加载后访问它（所以使用 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)

在这种情况下，是否需要等待页面加载取决于您是在 head 还是 body 中定义了配置变量。

于 2016-09-23T17:19:40.050 回答