javascript - 如何在开始时显示一个空图表并在按钮单击时填充值
问题描述
我有这篇文章的代码。我想在单击按钮时填充图表而不是对其进行初始化并仅提供 3 个值,例如22286,12286,9286
(这些值将是动态的)并绘制具有与片段相同外观(即 3 色图表)的图表
Highcharts.chart('container', {
colors: ['#762232', '#EFCA32', '#007788'],
title: {
text: '',
},
chart: {
type: 'area',
backgroundColor: null,
// spacingRight: 5,
spacingTop: 5,
spacingBottom: 5,
style: {
fontFamily: 'Arial, sans-serif',
},
plotBorderWidth: 1,
plotBorderColor: '#ccc',
},
xAxis: {
gridZIndex: 4,
gridLineWidth: 1,
tickInterval: 1,
tickWidth: 0,
alignTicks: true,
gridLineColor: '#762232',
minPadding: 0,
maxPadding: 0,
title: {
text: 'Years Invested',
},
labels: {
enabled: true,
},
},
yAxis: {
gridLineWidth: 0,
opposite: true,
title: {
text: 'Hypothetical Value',
},
showFirstLabel: false,
showLastLabel: false,
tickPositioner: function() {
var prevTickPos = this.tickPositions,
tickPositions = [prevTickPos[0], prevTickPos[prevTickPos.length - 1]],
series = this.chart.series;
series.forEach(function(s) {
tickPositions.push(s.processedYData[s.processedYData.length - 1]);
});
tickPositions.sort(function(a, b) {
return a - b;
});
return tickPositions;
},
labels: {
enabled: true,
align: "right",
reserveSpace: true,
},
},
tooltip: {
enabled: !1,
},
plotOptions: {
area: {
pointStart: 0,
stacking: false,
lineColor: '#762232',
lineWidth: 1,
fillOpacity: 1,
dataLabels: {
crop: !1,
color: '#762232',
align: 'right',
y: 5,
},
marker: {
enabled: !1,
symbol: 'circle',
radius: 1,
states: {
hover: {
enabled: !1,
},
},
},
},
},
series: [{
data: [4457, 13371, 22286]
}, {
data: [2457, 9371, 12286]
}, {
data: [1457, 5371, 9286]
}]
});
<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/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<figure class="highcharts-figure">
<div id="container"></div>
</figure>
<button>Populate Chart</button>
解决方案
您需要做的就是使用空数据数组创建系列并使用chart.update
方法添加数据。例子:
var chart = Highcharts.chart('container', {
...,
series: [{
data: []
}, {
data: []
}, {
data: []
}]
});
document.getElementById('chartInit').addEventListener('click', function(){
chart.update({
series: [{
data: [4457, 13371, 22286]
}, {
data: [2457, 9371, 12286]
}, {
data: [1457, 5371, 9286]
}]
});
});
现场演示: https ://jsfiddle.net/BlackLabel/8pL6hr3w/
API 参考: https ://api.highcharts.com/class-reference/Highcharts.Chart#update
推荐阅读
- python - Pandas 将 DataFrame2 ROW 附加到 DataFrame1 ROW
- xamarin - 如何提高 CollectionView 的性能
- c# - How to specify a TemplateBinding command in code?
- javascript - javascript sum up selected element data value and deduct when unselect
- c# - LINQ: select specific value in a datatable column
- r - R按重叠范围分组
- javascript - 默认加载 iFrame
- laravel - Laravel 更新分块结果跳过行
- c - gcc 输出的奇怪之处
- laravel - 自定义 Faker 提供者:重用城市