我试图将我的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)
在这种情况下,是否需要等待页面加载取决于您是在头还是主体中定义配置变量。