所以,在这里我遇到了两件事。即使经过足够的头脑风暴,我也无法弄清楚需要更改哪些参数才能让我的图表根据需要显示数据。 这是我的图表的输出:MY Output。我希望输出是这样的:Desired Price Chart
基本上有两件事我想让它发挥作用。 首先,我想,让Y标签不从0开始将使图形工作。但我无法确定我需要更改哪个参数。
其次,对于X轴数据,我将一组日期作为类别传递给XAxis系列。我希望以七天的间隔显示日期。我已经成功实现了这一点。我面临的问题是,我想强行显示今天的日期。今天的日期是我的代码的XAxisData数组中的最后一个元素,我将其传递给'类别'对于X轴。所以,我的问题是,如何强制显示A轴类别的最后一个元素? (可选问题)使用datetime是否有更好的方法可以做到这一点? 这是我的图表代码:
function setPriceParameterAndDisplay(){
document.getElementById('container').style.visibility='visible';
Highcharts.chart('container', {
chart: {
type: 'area'
},
title: {
text: StockHeading ,
},
subtitle: {
text: '<a style=\"color:blue;\" href=\"https://www.alphavantage.co\">Source: Alpha Vantage</a>'
},
xAxis: {
categories: XAxisData,
minTickInterval: 6,
showLastLabel: true,
},
yAxis: [{
title: {
text: 'Stock Price',
},
},{
title: {
text: 'Volume '
},
labels: {
format: '{value}m',
},
opposite:true,
}],
plotOptions: {
label: {
enabled: false,
},
line: {
enableMouseTracking: true
},
series: {
marker: {
enabled: false
},}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
series: [{
name: '".$symbol."',
label: {
enabled: false,
},
type: 'area',
color: '#F66464',
data: PriceData,
tooltip: {
valueDecimals: 2
}
}, {
name: '".$symbol." Volume' ,
label: {
enabled: false,
},
type: 'column',
color: '#FFFFFF',
yAxis: 1,
data: StockVolume,
tooltip: {
valueDecimals: 2
}
}]
});}
答案 0 :(得分:2)
<强> 1。使区域系列不从零开始(y轴)
您需要为此系列指定threshold
属性。默认情况下它是0
,这就是问题的原因。
API参考: https://api.highcharts.com/highcharts/series.area.threshold
<强> 2。强制x轴标签始终显示在最后一个点
默认情况下,Highcharts会自动计算并决定显示哪个刻度。标签出现在刻度线的位置。因此,为了确保轴上出现一些特定的刻度,请使用tickPosition
(手动定义所有刻度)或tickPositioner
(修改Highcharts创建的刻度,然后再将它们传递给图表构造函数)。
API参考: