gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 04:29:32 25 4
gpt4 key购买 nike

我是编程语言的新手,所以请考虑我的知识匮乏。基本上我正在尝试在我的项目中使用 Highcharts,该项目从 csv 数据源获取数据。请看一下: flood forcast data

该图表显示特定地点 10 天的洪水预报。我希望能够默认禁用数据系列,以便当您单击其图例项时它会显示,而不是隐藏。这将使我能够将多个系列放在一张图表上,仅显示重要的系列,同时允许用户根据需要显示其他系列。例如:加载时,第 1 天、第 3 天和第 5 天为“visible: true”,其余为“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>

提前致谢。

最佳答案

您可以使用可见属性来执行此操作,只需添加到您的选项中即可:

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

series 代表您的系列数组,在此示例中有两个系列,第一个隐藏,第二个可见。您也可以检查这个使用数据 csv 的 fiddle :

http://jsfiddle.net/u4yaxk58/

希望对你有帮助!

关于javascript - 具有 csv 数据源的 Highcharts 系列可见性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44735664/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com