我有这篇文章的代码,当我增加年数时,
xAxis: {
....
min: 0,
max: 3, // This is dynamic
该图表仅限于 0.1 年。我怎样才能使图表跨度首尾相连,使其看起来像这样
编辑:问题是 x 轴“投资年数”来自一个变量和没有。年数变化,例如在这个问题中它是 3,所以图表需要像截图一样在 x 轴上从 0 到 3(从左到右)一直扩展,我用 max 在 x 上显示 3 年轴,我将在 y 轴上绘制的 3 个值也将来自变量,例如它的 '22286,12286,9286' 我将只有这 3 个值,图形将从 0 开始。所以我不能在系列中放置任何其他任意值
var chart = 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,
min: 0,
max: 3,
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: []
}, {
data: []
}, {
data: []
}]
});
document.getElementById('chartInit').addEventListener('click', function() {
chart.update({
series: [{
data: [0, 22286]
}, {
data: [0, 12286]
}, {
data: [0, 9286]
}]
});
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<button id="chartInit">Init chart</button>
<div id="container"></div>
您需要在[x, y]
格式中定义数据并使用yearsInvested
变量作为第二个点的值。
const yearsInvested = 10;
chart.update({
series: [{
data: [
[0, 0],
[yearsInvested, 22286]
]
}, {
data: [
[0, 0],
[yearsInvested, 12286]
]
}, {
data: [
[0, 0],
[yearsInvested, 9286]
]
}]
});
现场演示: https : //jsfiddle.net/BlackLabel/zun7cdge/
API参考: https : //api.highcharts.com/highcharts/series.area.data
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句