javascript - 在图表之间切换

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，那么它会显示一个普通图表。如何在我的单选按钮的更改事件中执行此操作？

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

If I choose the radio option as type1 , then data should contain everything as above.But if the radio option is type2, then "data" should not contain the "plotoptions".

如果您想使用 codeigniter 表单助手，请将 radio 输入替换为 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>