Question

我有一个复选框，我想在其中打开和关闭图表的年份列。我知道我可以使用 .hide() 关闭整个系列，但这似乎不是系列中数据的一种方法？例如，我试图在取消选中该框时关闭 2018 列。

function createChart(DamageCount18, DamageCount19, DamageCount20, DamageCount21) {
    console.log('DOM fully loaded and parsed');
    const barchart = Highcharts.chart('barchart', {
        chart: {
            type: 'column'
        },
        title: {
            text: 'Member DATA'
        },
        xAxis: {
            categories: ['2018', '2019', '2020', '2021']
        },
        yAxis: {
            title: {
                text: 'Damages'
            }
        },
        series: [{
            data: [400, 150, 455, 300]
        }]
    });
    radioButtons(barchart);
}

createChart();

function radioButtons(chart, barchart) {
    document.getElementById('2018').addEventListener('click', e => {
        let barSeries = barchart.series[0].options.data[0]
        console.log(barSeries)
        barSeries.hide();
    })
}

  #container {
      width: 100%;
      height: 400px;
  }

  #barchart {
    width: 100%;
    height: 400px;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <script src="https://code.highcharts.com/highcharts.js"></script>
    <link rel="stylesheet" href="index.css">
    <title>First Highchart</title>
</head>
<body>
     <div id='barchart'></div>

    <input type="checkbox" id="2018" name="2018" value="2018" checked>
    <label for="2018">2018</label><br>
    <input type="checkbox" id="2019" name="2019" value="2019" checked>
    <label for="2019">2019</label><br>
    <input type="checkbox" id="2020" name="2020" value="2020" checked>
    <label for="2020">2020</label><br>
    <input type="checkbox" id="2021" name="2021" value="2021" checked>
    <label for="2021">2021</label><br>

   

    <script src="index.js"></script>
</body>
</html>

我收到的错误是 .hide() 不是数据数组的函数。

Answer 1

最简单的解决方案是将您的数据分成多个系列，每个系列只有一个点，并在系列上调用 hide 方法。

plotOptions: {
  series: {
    color: 'blue',
    grouping: false
  }
},
series: [{
  data: [
    [0, 400]
  ]
}, {
  data: [
    [1, 150]
  ]
}, ...]

现场演示： http://jsfiddle.net/BlackLabel/qwvxgmdp/

隐藏系列 HighCharts 中的第一个值数据

1 个答案: