Question

我有2个单选按钮，如下所示：

<h4>Graph Type</h4>
<label class="radio"><?= form_radio('graph_type', 'type1', TRUE) ?>Type1</label>
<label class="radio"><?= form_radio('graph_type', 'type2', FALSE) ?>Type2</label>

我有一个函数如下显示图形：如果我有plotOptions然后它显示一个堆积图表，如果我删除plotOptions然后它显示一个正常的图表。如何在我的收音机btton的更改事件中这样做？

var testSettings = function(chart){

        var data = {
            chart: {
                type: type,
                renderTo: renderTo,
                height: height,
                width: tabWidth
            },
            title: {
                text: chart.label
            },

            plotOptions: {
                area: {
                    stacking: 'normal',
                    dataLabels: {
                        useHTML: true
                    },
                    pointPadding: 0,
                    groupPadding: 0.12,
                },
                column: {
                    stacking: 'normal',
                }
            },

        return data;

    }

Answer 1

如果我选择radio1选项作为type1，那么数据应该包含如上所述。但如果无线电选项是type2，那么“数据” 不应该包含“plotoptions”。

如果你想使用codeigniter形式帮助，

，用form_radio替换无线电输入

// Onchange pass selected value
$('input[name="graph_type"]').on('change', function() {
  activateChart($(this).val());
});

var activateChart = function(type) {
  // here  you put your actual chart options object

  var settings = testSettings({
    label: 'this is for test',
    type: 'line',
    renderTo: 'hsdiv',
    height: '500px',
    tabWidth: '600px'
  });

  switch (type) {
    case "type1":
      // no change to options
      break;

    case "type2":
      // delete plotOptions
      delete settings.plotOptions;

      // if you want to add somemore options here, you can

      break;
  }

  // after change what's changed 
  console.log(type);
  console.log(settings);

  // All set then 
  // chart = new Highcharts.Chart(settings);
}

var testSettings = function(chart) {

  // Better to have default, to avoid exception, if arguments not supplied properly

  var defaults = {
    type: 'line',
    renderTo: 'container',
    height: '300px',
    tabWidth: '400px',
    label: 'Chart Label'
  };

 // extend with given arguments
  var settings = $.extend({}, defaults, chart || {});

  var data = {
    chart: {
      type: settings.type,
      renderTo: settings.renderTo,
      height: settings.height,
      width: settings.tabWidth
    },
    title: {
      text: settings.label
    },

    plotOptions: {
      area: {
        stacking: 'normal',
        dataLabels: {
          useHTML: true
        },
        pointPadding: 0,
        groupPadding: 0.12,
      },
      column: {
        stacking: 'normal',
      }
    }

  };
  return data;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h4>Graph Type</h4>
<label class="radio"><input type="radio" name="graph_type" value="type1"/> Type1</label>
<label class="radio"><input type="radio" name="graph_type" value="type2"/>Type2</label>

在图表之间切换

1 个答案: