如何从水平条形图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>