如何解决如何从水平条形图js的两面制作标签
我想像这样在两侧制作双水平条的侧面标签:pic 1,pic 2
有人可以帮我idk怎么做吗,我是React和Chartjs的新手
此帖子的继续:How to make multiple horizontal bar chartjs
这是我的代码:
- 此数据:
图表数据
export const dataPasienKeluarMasuk = {
type: 'bar',labels: [
[0,1,2,3,4],// expect output 0 - 4
[5,6,7,8,9],// expect output 5 - 9
[10,14],// ext..
[15,19],[20,24],[25,29],[30,34],],datasets: [
{
label: 'Pasien Masuk',xAxisID: 'A',data: [100,90,80,70,60],backgroundColor: 'red',},{
label: 'Pasien Keluar',data: [-100,-90,-80,-70,-60],backgroundColor: 'blue',}
- 此图表:
多个y水平线
import { HorizontalBar } from 'react-chartjs-2'
import { dataPasienKeluarMasuk } from ...blabla
<HorizontalBar
data={dataPasienKeluarMasuk}
height={227}
options={{
responsive: true,title: {
display: true,text: 'Data Pasien Keluar Masuk',fontSize: 20,legend: {
display: true,position: 'bottom',scales: {
xAxes: [
{
stacked: true,scaleLabel: {
display: true,labelString: 'Jumlah Pasien (orang)',ticks: {
// Include a dollar sign in the ticks
callback: (value) => Math.abs(value),yAxes: [
{
stacked: true,ticks: {
display: true,reverse: true,tooltips: {
callbacks: {
label: (tooltipItem,data) => {
let ds = data.datasets[tooltipItem.datasetIndex]
return (
ds.label + ': ' + Math.abs(ds.data[tooltipItem.index])
)
},}}
/>
解决方法
您可以通过如下定义第二个y轴来获得所需的结果:
{
type: 'category',position: 'right',offset: true,ticks: {
reverse: true,},gridLines: {
display: false
}
}
请在下面查看您经过修改且可运行的代码:
new Chart(document.getElementById('canvas'),{
type: 'horizontalBar',data: {
labels: ['0-4','5-9','10-14','15-19','20+'],datasets: [{
label: 'Pasien Masuk',data: [100,90,80,70,60],backgroundColor: 'red',{
label: 'Pasien Keluar',data: [-100,-75,-60,-70],backgroundColor: 'blue',]
},options: {
responsive: true,title: {
display: true,text: 'Data Pasien Keluar Masuk',fontSize: 20,legend: {
position: 'bottom',tooltips: {
callbacks: {
label: (tooltipItem,data) => {
let ds = data.datasets[tooltipItem.datasetIndex];
return ds.label + ': ' + Math.abs( ds.data[tooltipItem.index]);
}
}
},scales: {
xAxes: [{
stacked: true,ticks: {
callback: value => Math.abs(value)
}
}],yAxes: [{
stacked: true,ticks: {
reverse: true,}
},{
type: 'category',gridLines: {
display: false
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="canvas" height="100"></canvas>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。