如何使 highchart 跨越整个 x 轴?
How to make highchart span over whole x-axis?
我有这个 的代码,当我增加年数时,
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
我有这个
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