javascript - 高图表样条图未使用单个数据绘制
问题描述
我创建了带有高图表的样条图，它适用于多个数据。但是当我有一个系列记录时，它不会在图表上绘制任何东西。
请检查下面的 jsFiddle 与多个工作正常的数据。 https://jsfiddle.net/6ntu7Ls1/1/
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px; width: 95%"></div>
Highcharts.chart('container', {
chart: {
type: 'areaspline',
marginTop: 4,
plotBackgroundColor: '#f2f2f2',
backgroundColor: '#f2f2f2',
zoomType: '',
resetZoomButton: {
theme: {
r: 20
},
position: {
x: -5,
y: 5
}
},
},
title:{text:''} ,
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
millisecond: '%b-%d-%Y',
second: '%b-%d-%Y',
minute: '%b-%d-%Y',
hour: '%b-%d-%Y',
day:'%b-%d-%Y',
week: '%b-%d-%Y',
month: '%b-%d-%Y',
year: '%Y'
},
min: 1618444800000,
max: 1618531200000,
tickPixelInterval: 150,
minTickInterval: undefined,
tickInterval: null,
gridLineWidth: 0,
lineWidth: 0,
},
yAxis: {
title: (function () {
return {
text:'(PD%)',
align: 'high',
margin: -18,
offset: 20,
y: -100,
x: 10,
rotation: 0,
style: {
fontSize: '11px'
}
};
})(),
min: 0,
max: 4.8017044515217,
labels: {
},
showFirstLabel: true,
showLastLabel: true,
opposite: false,
tickInterval: undefined,
tickAmount: 5,
lineWidth: 0,
gridLineWidth:0,
minorGridLineWidth :0,
lineColor: 'transparent',
startOnTick:false,
endOnTick:true,
plotBands:
{
from: 4.8017044515217,
to:100,
color: '#fbb189',
}
},
tooltip: {
enabled: false
},
credits: {
enabled: false
},
plotOptions: {
areaspline: {
fillOpacity: 1,
zoneAxis: 'x',
lineWidth:0,
zones:[],
gridLineWidth: 0,
minorGridLineWidth: 0,
},
series: {
marker: {
enabled: false
},
states: {
hover: {
enabled: false
}
},
dataLabels: {
enabled: false,
inside: false,
style: {
fontWeight: "bold",
},
},
events: {
legendItemClick() {
return false;
}
},
},
enableMouseTracking: false,
tooltip: {
enabled: false
},
},
series: [
{
color: '#fbb189',
name: 'Deteriorating',
showInLegend: false,
data: [{x: 1618444800000, y: 4.8017044515217},{x: 1618531200000, y: 4.8017044515217}],
legendIndex: 3
},
{
color: '#fff2d0',
name: 'Stable',
showInLegend: false,
data: [{x: 1618444800000, y: 1.5426857827908}, {x: 1618531200000, y: 1.5389919557792}],
legendIndex: 2
}, {
color: '#c2e0b7',
name: 'Improving',
showInLegend: false,
data: [{x: 1618444800000, y: 0.5853383784494}, {x: 1618531200000, y: 0.5819433217592}],
legendIndex: 1
},
{
name: '',
showInLegend: false,
type: 'spline',
data: [{x: 1618444800000, y: 0.6352655741304001}, {x: 1618531200000, y: 0.6339928215217}],
legendIndex: 0,
color: 'red'
}
]
});
下面是工作 jsFiddle 的屏幕截图：
请检查以下 jsFiddle 与单个数据不起作用。 https://jsfiddle.net/g3m0x25d/
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px; width: 95%"></div>
Highcharts.chart('container', {
chart: {
type: 'areaspline',
marginTop: 4,
plotBackgroundColor: '#f2f2f2',
backgroundColor: '#f2f2f2',
zoomType: '',
resetZoomButton: {
theme: {
r: 20
},
position: {
x: -5,
y: 5
}
},
},
title:{text:''} ,
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
millisecond: '%b-%d-%Y',
second: '%b-%d-%Y',
minute: '%b-%d-%Y',
hour: '%b-%d-%Y',
day:'%b-%d-%Y',
week: '%b-%d-%Y',
month: '%b-%d-%Y',
year: '%Y'
},
min: 1618444800000,
max: 1618531200000,
tickPixelInterval: 150,
minTickInterval: undefined,
tickInterval: null,
gridLineWidth: 0,
lineWidth: 0,
},
yAxis: {
title: (function () {
return {
text:'(PD%)',
align: 'high',
margin: -18,
offset: 20,
y: -100,
x: 10,
rotation: 0,
style: {
fontSize: '11px'
}
};
})(),
min: 0,
max: 4.8017044515217,
labels: {
},
showFirstLabel: true,
showLastLabel: true,
opposite: false,
tickInterval: undefined,
tickAmount: 5,
lineWidth: 0,
gridLineWidth:0,
minorGridLineWidth :0,
lineColor: 'transparent',
startOnTick:false,
endOnTick:true,
plotBands:
{
from: 4.8017044515217,
to:100,
color: '#fbb189',
}
},
tooltip: {
enabled: false
},
credits: {
enabled: false
},
plotOptions: {
areaspline: {
fillOpacity: 1,
zoneAxis: 'x',
lineWidth:0,
zones:[],
gridLineWidth: 0,
minorGridLineWidth: 0,
},
series: {
marker: {
enabled: false
},
states: {
hover: {
enabled: false
}
},
dataLabels: {
enabled: false,
inside: false,
style: {
fontWeight: "bold",
},
},
events: {
legendItemClick() {
return false;
}
},
},
enableMouseTracking: false,
tooltip: {
enabled: false
},
},
series: [
{
color: '#fbb189',
name: 'Deteriorating',
showInLegend: false,
data: [{x: 1618444800000, y: 4.8017044515217}],
legendIndex: 3
},
{
color: '#fff2d0',
name: 'Stable',
showInLegend: false,
data: [{x: 1618444800000, y: 1.5426857827908}],
legendIndex: 2
}, {
color: '#c2e0b7',
name: 'Improving',
showInLegend: false,
data: [{x: 1618444800000, y: 0.5853383784494}],
legendIndex: 1
},
{
name: '',
showInLegend: false,
type: 'spline',
data: [{x: 1618444800000, y: 0.6352655741304001}],
legendIndex: 0,
color: 'red'
}
]
});
以下是不起作用的小提琴的屏幕截图：
解决方案
我认为一切都按应有的方式工作，将其设置plotOptions.series.marker.enabled为 false 隐藏点。
推荐阅读
- ios - 如何使用 HockeyApp 在应用程序配置文件中未列出的设备上安装移动应用程序
- javascript - Jests 测试找不到图像 Webpacker
- visual-studio - Visual Studio 不接受 Xamarin UWP 应用的 makecert 证书
- excel - 针对 IBM DB2 运行带有嵌套子查询和联合的 Excel VBA 查询
- javascript - 我应该如何在 JavaScript 中“屈服”？
- sql - 根据组排除列表查询逻辑以获得预期结果
- repository - Stash 和 Bitbucket 是什么关系？
- python - 如何使用 jq 获取我的 json 的所有第一个对象？
- caching - ServiceStack 是否缓存内部请求？
- android - 在 PlayStore 中私有分发 Android 应用程序