如何解决Apexcharts项目栏上的最大宽度
如何更改Apexcharts中项目栏的最大宽度/高度? (https://apexcharts.com/)
我有一个水平条形图,其数据是动态加载的,并且用户(项目)的数量是变化的。当用户很少或只有一个用户时,栏看起来非常大,我想将高度设置为最大50像素。
代码:
var timeChart = {
formatter: function (value) {
var v = formatFromSeconds(value);
return v;
}
};
var desv_time = function (value) {
var v = formatFromSeconds(value);
if (value>0)return "+"+v;
else return v;
}
//CHART
var chart1 = new ApexCharts( document.querySelector("#chart-desv"),{
chart: {
id: 'chart1',type: 'bar'
},plotOptions: {
bar: {
horizontal: true,},dataLabels: {
enabled: true,formatter: desv_time,style: {
colors: ["#000"]
}
},series: [],xaxis: {labels: {
formatter: desv_time,}},tooltip: {
followCursor: true,x: {
formatter: function(value) {
return value;
},y: {
formatter: desv_time,title: {formatter: (seriesName) => 'Time difference',}
},marker: {show:false}
},title: { text: "Usual workday duration: 08:00",align: "center" }
});
chart1.render();
屏幕截图(一个用户的栏非常大):
解决方法
对于水平条形图,可以使用barHeight
属性设置条形的高度。不幸的是,它不能设置为像素值,而是“在网格中可用高度的百分比”(来自docs)。
有效地,它可以作为最大高度使用,因此,如果有更多数据需要拟合,则条形图将缩小。
plotOptions: {
bar: {
barHeight: '70%'
}
}
,
这是我在 VueJS 中实现这种行为的方法。
模板部分
<apexchart :options="barChartOptions" :series="series"></apexchart>
脚本部分
computed() {
chartOptions() {
return {
chart: {
type: 'bar',height: 100 + this.myData.length() * barWidth,}
}
}
}
其中 myData 是包含要绘制的信息的数据数组,而 barWidth 是我想要的每个条形的宽度。 请注意,这实质上是固定每个条形的宽度,然后将图表的高度调整为条形数量的线性函数。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。