图表在重新绘制时不调整/遵循chartArea选项

时间:2017-03-15 15:25:49

标签: javascript jquery ruby-on-rails charts google-visualization

我有一个POST表单,可以为Chartkick提供新的参数。它在相应的控制器方法运行时调用Chartkick.options,但由于某种原因,重绘时不会遵循chartArea选项。该图表比以前减少了65%。

奇怪的是,所有其他选项,如颜色/轴/图例都被遵守。当我调整窗口大小时,小图表会调整为全宽!我尝试将图表宽度设置为内嵌<%= area_chart @chart_data, width: "100%" %>,但仍然会变小。

加载页面时的图表 Chart when page loads

提交表单时更新了图表 Updated chart when form submitted

调整窗口大小时更新了图表 Chart when page resized

提交表单的Javascript

var formSubmit = function() {
  $('.chart-radio-icon').change(function(){
    $('#mega_form').submit();
  });
};

$(document).ready(formSubmit);

在控制器中设置Chartkick.options

def set_default_options(chart_type)
    default_options = {
      colors: ['#d2080e', '#c464d0'],
      library: {
        chartArea: {
          top: 45,
          right: 40,
          bottom: 40,
          left: 80
        },
        animation: {
          startup: true,
          duration: 1500,
          easing:  'out'
        },
        backgroundColor: '#2a2a2a',
        fontName: 'Calibri',
        curveType: 'function',
        vAxis: {
          gridlines:{
            color: '#333333'
          },
          textStyle: {
            color: '#a0a0a0'
          }
        },
        hAxis: {
          format: 'MMM d',
          baselineColor: '#000000',
          textStyle: {
            color: '#a0a0a0'
          }
        },
        axisTitlesPosition: 'none',
        legend: {
          position: 'top',
          alignment: 'center',
          textStyle: {
            color: '#a0a0a0',
            fontSize: 14,
            bold: true
          }
        },
        lineWidth: 3,
        pointSize: 7,
        crosshair: {
          trigger: 'both',
          opacity: 0.2
        },
        dataOpacity: 0.7,
        tooltip: {
          textStyle: {
            color: '#2a2a2a'
          }
        }
      }
    }

    case(chart_type)
    when chart_type = "initial_chart"
      Chartkick.options = default_options
    when chart_type = "mega_chart"
      Chartkick.options = default_options
    else
    end
  end
end

0 个答案:

没有答案