我是Highcharts和JS的新手。每个月我有5张图表。在这里，我仅分享5个示例图表。我必须为每个月的每个菜单项创建一个下拉菜单。当我选择一个月时，该月的所有图表都应显示在其div中。默认月份应为当前月份。我该怎么办？
到目前为止，这是我的代码：
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<div class="row">
<div class="col-lg-4 col-md-12 col-xs-12">
<div id="container1"></div>
</div>
<div class="col-lg-4 col-md-12 col-xs-12">
<div id="container2"></div>
</div>
<div class="col-lg-4 col-md-12 col-xs-12">
<div id="containerx"></div>
</div>
</div>
<div class="row">
<div class="col-lg-6 col-md-12 col-xs-12">
<div id="container3"></div>
</div>
<div class="col-lg-6 col-md-12 col-xs-12">
<div id="container4"></div>
</div>
</div>
<div id="container1"></div>
<div id="container2"></div>
JavaScript：
Highcharts.chart('container1', {
title: {
text: 'Pie point CSS'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
series: [{
type: 'pie',
allowPointSelect: true,
keys: ['name', 'y', 'selected', 'sliced'],
data: [
['Apples', 29.9, false],
['Pears', 71.5, false],
['Oranges', 106.4, false],
['Plums', 129.2, false],
['Bananas', 144.0, false],
['Peaches', 176.0, false],
['Prunes', 135.6, true, true],
['Avocados', 148.5, false]
],
showInLegend: true
}]
});
Highcharts.chart('container2', {
chart: {
type: 'bar'
},
title: {
text: 'Historic World Population by Region'
},
subtitle: {
text: 'Source: <a href="https://en.wikipedia.org/wiki/World_population">Wikipedia.org</a>'
},
xAxis: {
categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],
title: {
text: null
}
},
yAxis: {
min: 0,
title: {
text: 'Population (millions)',
align: 'high'
},
labels: {
overflow: 'justify'
}
},
tooltip: {
valueSuffix: ' millions'
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -40,
y: 80,
floating: true,
borderWidth: 1,
backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
shadow: true
},
credits: {
enabled: false
},
series: [{
name: 'Year 1800',
data: [107, 31, 635, 203, 2]
}, {
name: 'Year 1900',
data: [133, 156, 947, 408, 6]
}, {
name: 'Year 2000',
data: [814, 841, 3714, 727, 31]
}, {
name: 'Year 2016',
data: [1216, 1001, 4436, 738, 40]
}]
});
Highcharts.chart('containerx', {
title: {
text: 'Pie point CSS'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
series: [{
type: 'pie',
allowPointSelect: true,
keys: ['name', 'y', 'selected', 'sliced'],
data: [
['Apples', 29.9, false],
['Pears', 71.5, false],
['Oranges', 106.4, false],
['Plums', 129.2, false],
['Bananas', 144.0, false],
['Peaches', 176.0, false],
['Prunes', 135.6, true, true],
['Avocados', 148.5, false]
],
showInLegend: true
}]
});
Highcharts.chart('container3', {
title: {
text: 'Solar Employment Growth by Sector, 2010-2016'
},
subtitle: {
text: 'Source: thesolarfoundation.com'
},
yAxis: {
title: {
text: 'Number of Employees'
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
plotOptions: {
series: {
label: {
connectorAllowed: false
},
pointStart: 2010
}
},
series: [{
name: 'Installation',
data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
}, {
name: 'Manufacturing',
data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
}, {
name: 'Sales & Distribution',
data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
}, {
name: 'Project Development',
data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
}, {
name: 'Other',
data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
}],
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom'
}
}
}]
}
});
Highcharts.chart('container4', {
chart: {
type: 'column'
},
title: {
text: 'Stacked column chart'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
},
yAxis: {
min: 0,
title: {
text: 'Total fruit consumption'
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
},
legend: {
align: 'right',
x: -30,
verticalAlign: 'top',
y: 25,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
borderColor: '#CCC',
borderWidth: 1,
shadow: false
},
tooltip: {
headerFormat: '<b>{point.x}</b><br/>',
pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
}
}
},
series: [{
name: 'John',
data: [5, 3, 4, 7, 2]
}, {
name: 'Jane',
data: [2, 2, 3, 2, 1]
}, {
name: 'Joe',
data: [3, 4, 4, 2, 5]
}]
});
答案 0 :(得分：0)
不仔细研究整个应用程序就很难准备完美的解决方案。实现的方式几乎不取决于您的数据结构和需要使用的图表类型，但是我准备了一个通用示例来说明如何实现。
首先，我准备了数据，以便每个月分配一次。然后，我在onchange元素上添加了dropdown侦听器，并使用内置方法Chart.update()通过以前定义的数据对象中的新数据更新了所有图表。我在代码中留下了注释，因此您可以“逐步”阅读所发生的情况，但是如果某些部分对于您来说您无法理解或不清楚，只需在此答案下方的注释中提问即可。
var months = {} // Will be the object with data structure for each month
var dropdown = document.getElementById('dropdown-months')
var options = dropdown.querySelectorAll('option')
var currentMonthId = new Date(Date.now()).getMonth()
var currentMonthName;
// Create random initial data
options.forEach(elem => {
months[elem.value] = []
for (var i = 0; i < 10; i++) {
months[elem.value].push(Math.round(Math.random() * 100))
}
// Additionally, select current month in dropdown
if (elem.value === Object.keys(months)[currentMonthId]) {
currentMonthName = Object.keys(months)[currentMonthId]
elem.selected = true
}
})
dropdown.onchange = function() {
var selectedMonth = this.value
// Update all charts by new data
Highcharts.charts.forEach(chart => {
chart.update({
series: [{
data: months[selectedMonth]
}]
})
})
}
// Generate charts and fill them by current month data
for (var i = 1; i <= 5; i++) {
Highcharts.chart('container' + i, {
series: [{
data: months[currentMonthName]
}]
})
}
实时示例： https://jsfiddle.net/yacrdfo0/
API参考： https://api.highcharts.com/class-reference/Highcharts.Chart#update