javascript - 使用 Turbolinks 的 Highcharts - Rails 4

Question

我正在使用带有 Rails 4 和 Turbolinks 的 Highcharts。我遇到了切换页面时图表没有出现的问题。

我通过在初始化脚本中执行此操作来解决此问题：

var ready = function(){
    Highcharts.getOptions().colors = Highcharts.map(Highcharts.getOptions().colors,              function(color) {
    return {
        radialGradient: { cx: 0.5, cy: 0.3, r: 0.7 },
        stops: [
            [0, color],
            [1, Highcharts.Color(color).brighten(-0.3).get('rgb')] // darken
        ]
    };
});
//further initialization
}


$(document).ready(ready);
$(document).on('page:load', ready);

然后每次我访问该页面时它都会加载。但是整个图表都是黑色的。我正在使用具有多种颜色的饼图。但仅显示第一次颜色。但是在随后的页面访问中，颜色都是黑色的。

score 2 · Accepted Answer

有完全相同的问题，并通过禁用页面的 turbolink 来解决它。

例子：

= link_to 'My charts page', charts_page_path, data: { turbolinks: false }

注意：停用 turbolinks 的方式自 5.0 版起发生了变化，本文中的链接适用于旧版本。

因此，如果这不起作用，请检查您的 turbolinks 版本：

对于 5.0+ 版：使用data: { turbolinks: false }
对于旧版本：使用data: { no_turbolink: true }

score 1 · Accepted Answer

您正在使用径向渐变对象覆盖现有颜色。然后在重新加载时，您正在执行相同的操作，但现在可变颜色不再是字符串，而是对象（我猜）。

我认为你应该改变这个：

Highcharts.getOptions().colors = Highcharts.map(Highcharts.getOptions().colors, function(color) { ... });

至：

var colors = ['#FF00FF', '#FFFFFF' ... '#00FFFF'];
Highcharts.getOptions().colors = Highcharts.map( colors , function(color) { .. });

score 0 · Accepted Answer

turbolinks 就像 jquery-mobile。使用 turbolink 的页面就像单页应用程序一样，因此您需要在它们之间保持状态。您可以创建一个全局变量并检查它是否为 nil，或者禁用 highcharts 页面的 turbolinks。

javascript - 使用 Turbolinks 的 Highcharts - Rails 4

3 回答 3

Related

Reference