javascript - 如何在Highcharts中从0开始绘制面积图
问题描述
我想从零开始我的图表而不在系列数组中添加 0
Highcharts.chart('most_sale_at', {
chart: {
type: 'area',
backgroundColor: null
},
title: {
text: null
},
colors: ['#3bbf93', '#494747'],
subtitle: {
text: null
},
xAxis: {
categories: ["11:00 AM", "12:00 PM", "1:00 PM", "2:00 PM", "3:00 PM", "4:00 PM", "5:00 PM", "6:00 PM", "7:00 PM", "8:00 PM", "9:00 PM"],
crosshair: true,
startOnTick: true
},
yAxis: {
labels: {
format: '{value}'
},
title: {
text: 'Gross Sales'
}
},
tooltip: {
shared: true
},
plotOptions: {
area: {
marker: {
enabled: false
}
}
},
credits: {
enabled: false
},
series: [{
name: 'This week',
data: [17788, 54236, 42461, 23809, 6921, 4785, 6888, 12035, 17403, 15740, 9536],
tooltip: {
valueSuffix: ''
}
}, {
name: 'Last week',
data: [12488, 44236, 50461, 33809, 18921, 3785, 5888, 10035, 12403, 740, 936],
tooltip: {
valueSuffix: ''
},
marker: {
enabled: false
}
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="most_sale_at">Placeholder for most sales</div>
解决方案
通过和选项将tickmarkPlacement
属性设置为on
并更正空白:min
max
xAxis: {
categories: ["11:00 AM", "12:00 PM", "1:00 PM", "2:00 PM", "3:00 PM", "4:00 PM", "5:00 PM", "6:00 PM", "7:00 PM", "8:00 PM", "9:00 PM"],
crosshair: true,
tickmarkPlacement: 'on',
min: 0.5,
max: 9.5
}
现场演示:http: //jsfiddle.net/BlackLabel/uqLp0rjh/
推荐阅读
- r - 从github上传数据
- generics - 当主构造函数是通用的时,如何在 Kotlin 中制作具体的辅助构造函数?
- ruby-on-rails - 点击提交时,我的 Rails 应用程序表单显示错误消息
- python - 如何将 Django App 部署到 1and1 (ionos)
- android - 在 Android SDK 29 中将“play-services-base”17.1.0 更新到 17.2.0 后,应用程序不断崩溃
- html - HTML5 表单验证消息
- javascript - Javascript replaceChild 不显示消息
- python-sphinx - 交互式会话中的空白行问题
- javascript - 如何使用cloudfunction和nodejs将数字转换为条形码
- django - Django模板:在模板中显示对象不使用视图