reactjs - 如何自定义 Highcharts.js 中的条形宽度和条形间距
问题描述
我想做这样的东西
这是我的示例代码:-
plotOptions: {
series: {
borderWidth: 0,
pointWidth: 80,
groupPadding: 4,
dataLabels: {
enabled: true,
format: '{point.y:.1f}%',
}
}
},
我对 pointWidh 和 groupPadding 属性感到困惑,一次只有一个属性可以工作。当只给定pointWidth时,宽度适用,而当只给groupPadding时,它也适用。但我希望这些属性不能同时适用。我在做什么错这里是重现示例 https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/plotoptions/column-pointpadding-025/
解决方案
我已经编写了完整的工作代码,如果有不清楚的地方请告诉我。
Highcharts.chart('container', {
chart: {
type: 'column'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
plotOptions: {
series: {
pointPadding: 0,
borderRadius: 8,
pointWidth: 50
}
},
series: [{
data: [{y: 29.9, color: '#ff7841'}, {y: 71.5, color: '#ffa03c'}, {y: 106.4, color: '#ffbb39'}, {y: 129.2, color: '#b0bf05'}, {y:144.0, color: '#00bcb9'}, {y: 176.0, color: '#05a7cd'}, {y: 135.6, color: '#4d7ed7'}]
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>
这个小提琴似乎非常接近你的设计。
推荐阅读
- oracle - 如何避免出现错误缺失表达式
- r - R在Excel中写入时将NA替换为空字段(无)
- python - pandas 相当于 select sum(t.col1 * t.col2) / sum(t.col3) from table as t group by t.col4
- sql - 在单个查询中从 SQL 中的同一列中选择最大值和最小值
- jmeter - jMeter如何重新执行CSV Data Set Config
- c# - WebForms ListBox - 如果 ListBox 已经包含项目,则添加项目不起作用
- python - python中的uart通信读取错误
- flutter - 如何在 Flutter 中为不同的小部件使用相同的 BLoC?
- git - 我不明白使用 git diff 的文件中的差异
- sql - 在 TSQL、Azure 数据库中捕获服务主体的名称而不是它的 ID