Question

如何选择默认单选按钮并显示图表。更改功能是在单选按钮之间切换并更改图形。

这是我的代码：

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>


<input class="test" name="g" type="radio" value="a">data A</input>

<input class="test" name="g" type="radio" value="b">data B</input>


<input class="test" name="g" type="radio" value="total">Total</input>

<div id="container" style="height: 500px; width: 1000px"></div>
<script>
  var cashData = [341876.90, 256433.87, 212671.92, 198188.54, 128761.23, -199120.67, 1272.54, 59320.65];
  var cashData2 = [-141876.90, 26433.87, 112671.92, 118188.54, 109761.23, 99120.67, 1272.54, 59320.65];

  var invoiceData = [249129.45, 158324.81, 168234.87, 96012.45, 12789.23, 86210.23, 167232.95, 172616.23];
  var invoiceData2 = [119129.45, 128324.81, 158234.87, 226012.45, 22789.23, 336210.23, 227232.95, 212616.23];

      var expenseData = [-234645.45, -241219.65, -271981.44, -401432.89, -525198.34, -992615.09, -518671.92, -436981.32];
  var expenseData2 = [-224645.45, -111219.65, -211981.44, -201432.89, -445198.34, -332615.09, -338671.92, -416981.32];

  var categoriesName = ['Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']

</script>

JS

$(function() {
  var chart = new Highcharts.Chart({
    chart: {
      renderTo: 'container',
      type: 'line',
      title: ''
    },
    title: {
      text: ''
    },
    credits: {
      enabled: false
    },
    yAxis: {
      title: {
        text: ""
      }
    },
    xAxis: {
      categories: categoriesName
    }
  });

  $(".test").change(function() {
    value = this.getAttribute("value");
    while (chart.series.length > 0) {
      chart.series[0].remove(true);
    }
    if (value == 'a') {
      chart.addSeries({
        name: 'Cash',
        data: cashData,
        showInLegend: true
      });
      chart.addSeries({
        name: 'Invoice',
        data: invoiceData,
        showInLegend: true
      });
      chart.addSeries({
        name: 'Expense',
        data: expenseData,
        showInLegend: true,
      });
    } else if (value == 'b') {
      chart.addSeries({
        name: 'Cash',
        data: cashData2,
        showInLegend: true
      });
      chart.addSeries({
        name: 'Invoice',
        data: invoiceData2,
        showInLegend: true
      });
      chart.addSeries({
        name: 'Expense',
        data: expenseData2,
        showInLegend: true
      });
    }
  });
});

Answer 1

同意@Halvor Strand（来自评论），我会做$('.test').first().prop("checked", true).trigger("change");。我还修复了代码中的其他一些问题，并对其进行了整理。

$(function() {
  var cashData = [341876.90, 256433.87, 212671.92, 198188.54, 128761.23, -199120.67, 1272.54, 59320.65];
  var cashData2 = [-141876.90, 26433.87, 112671.92, 118188.54, 109761.23, 99120.67, 1272.54, 59320.65];

  var invoiceData = [249129.45, 158324.81, 168234.87, 96012.45, 12789.23, 86210.23, 167232.95, 172616.23];
  var invoiceData2 = [119129.45, 128324.81, 158234.87, 226012.45, 22789.23, 336210.23, 227232.95, 212616.23];

  var expenseData = [-234645.45, -241219.65, -271981.44, -401432.89, -525198.34, -992615.09, -518671.92, -436981.32];
  var expenseData2 = [-224645.45, -111219.65, -211981.44, -201432.89, -445198.34, -332615.09, -338671.92, -416981.32];

  var categoriesName = ['Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];

  var chart = new Highcharts.Chart({
    chart: {
      renderTo: 'container',
      type: 'line',
      title: ''
    },
    title: {
      text: ''
    },
    credits: {
      enabled: false
    },
    yAxis: {
      title: {
        text: ''
      }
    },
    xAxis: {
      categories: categoriesName
    }
  });

  $('.test').change(function() {
    value = this.getAttribute('value');
    while (chart.series.length > 0) {
      chart.series[0].remove(true);
    }
    if (value == 'a') {
      chart.addSeries({
        name: 'Cash',
        data: cashData,
        showInLegend: true
      });
      chart.addSeries({
        name: 'Invoice',
        data: invoiceData,
        showInLegend: true
      });
      chart.addSeries({
        name: 'Expense',
        data: expenseData,
        showInLegend: true,
      });
    } else if (value == 'b') {
      chart.addSeries({
        name: 'Cash',
        data: cashData2,
        showInLegend: true
      });
      chart.addSeries({
        name: 'Invoice',
        data: invoiceData2,
        showInLegend: true
      });
      chart.addSeries({
        name: 'Expense',
        data: expenseData2,
        showInLegend: true
      });
    }
  });

  $('.test').first().prop('checked', true).trigger('change');
});

<!DOCTYPE html>
<html>

<head>
  <script src="//code.highcharts.com/highcharts.js"></script>
  <script src="https://code.jquery.com/jquery-1.9.1.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>

<body>
  <label>
    data A
    <input class="test" name="g" type="radio" value="a">
  </label>
  <label>
    data B
    <input class="test" name="g" type="radio" value="b">
  </label>
  <label>
    Total
    <input class="test" name="g" type="radio" value="total">
  </label>
  <div id="container" style="height: 500px; width: 1000px"></div>
</body>

</html>

Highcharts：选择单选按钮时更改图形

1 个答案: