如何从水平条形图js的两面制作标签

问题描述

我想像这样在两侧制作双水平条的侧面标签:图片1 ，图片2

I want to make side labels for double horizontal bar on both side like this: pic 1, pic 2

有人可以帮我idk怎么做吗，我是React和Chartjs的新手

can someone help me idk how to do it, im new in react and 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',
      xAxisID: 'A',
      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轴来获得所需的结果:

You can obtain the desired result by defining a second y-axis as follows:

{
  type: 'category',
  position: 'right',
  offset: true,
  ticks: {
    reverse: true,
  },
  gridLines: {
    display: false
  }
}

请在下面查看您经过修改且可运行的代码:

Please take a look at your amended and runnable code below:

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, -75, -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',
        position: 'right',
        offset: true,
        ticks: {
          reverse: true,
        },
        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>

这篇关于如何从水平条形图js的两面制作标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！