Question

我是编程语言的新手，所以请考虑我的不良知识。基本上我正在尝试将Highcharts用于我的项目，该项目从csv数据源获取数据。请看看： flood forcast data

该图表显示了特定地点的10天洪水预报。我希望能够默认禁用数据系列，这样当您单击其显示的图例项时，而不是隐藏。这将使我能够将多个系列放在一个图表上，只显示重要的系列，同时允许用户在需要时显示其他系列。例如：在加载时，它将具有day1，day3和day5“visible：true”并且rest“visible：false”。希望我说清楚

这里是我的代码：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="robots" content="noindex, nofollow">
<meta name="googlebot" content="noindex, nofollow">
<script type="text/javascript" src="//code.jquery.com/jquery-1.7.1.js">       </script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" />
<title>Flood Forecast</title>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script type="text/javascript" src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.min.js"></script>


<script type='text/javascript'>

    $(document).ready(function() {

           $.get('data.csv', function(csv) {
            // Create the chart
            window.chart = new Highcharts.StockChart({
                chart: {
                    renderTo: 'container',
                    type:'spline'
                },

                rangeSelector: {
                    selected: 1,
                    inputDateFormat: '%Y-%m-%d'

                },

                title: {
                    text: 'Flood Forcast'
                },

                legend: {
                    enabled: true,
                    align: 'right',
                    verticalAlign: 'middle',
                    layout: 'vertical',
                    borderColor: 'black',
                    borderWidth: 0.5,
                    itemDistance: 0
                },

               // data
                data: {
                    csv: csv
                },


            }, function(chart) {
                // apply the date pickers
                setTimeout(function() {
                    $('input.highcharts-range-selector', $('#' + chart.options.chart.renderTo)).datepicker()
                }, 0)
            });
        });

        // Set the datepicker's date format
        $.datepicker.setDefaults({
            dateFormat: 'yy-mm-dd',
            onSelect: function(dateText) {
                this.onchange();
                this.onblur();
            }
        });

    });


</script>
</head>
<body>
<div id="container" style="height: 600px; min-width: 600px"></div>
</body>
</html>

提前致谢。

Answer 1

您可以使用visible属性执行此操作，只需添加到您的选项中：

series: [{
        visible: false
    }, {
        visible: true
    }]

系列代表你的系列数组，在这个例子中有两个系列，第一个隐藏，第二个可见。您也可以检查使用数据csv的小提琴：

http://jsfiddle.net/u4yaxk58/

希望它有所帮助！

具有csv数据源的Highcharts系列可见性

1 个答案: