如何制作多个水平条形图 [英] How to make multiple horizontal bar chartjs

问题描述

我想在以下反应中使用chartjs制作水平条形图：我想制作图表

I want to make horizontal bar chart using chartjs in react like this: chart i want to make

，但我最终还是这样做我制作的图表
可以对我有所帮助，我是react和chartjs的新手

but i end up doing like this chart i make can someon help me please, im new in react and chartjs

这是本文的延续：如何从水平条形图js的两面制作标签

这是我的代码：

• 此数据：

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',
    },
  ],
}

• 这是图表：



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: [
        {
          id: 'A',
          position: 'left',
        },
      ],
     },
   }}
 />




推荐答案

您应将两个轴都定义为 堆叠 ：

You should define both axes as stacked:

scales: {
  xAxes: [{
    stacked: true
  }],
  yAxes: [{
    stacked: true
  }]
}

要仅查看显示在x轴刻度上的正值，您需要定义 ticks.callback 函数在x轴上。

In order to see only positive values displayed on the x-axis ticks, you need to define a ticks.callback function on the x-axis.

ticks: {
  callback: value => Math.abs(value)
}

要在工具提示中仅显示正值，您还需要定义 tooltips.callback.label 的功能如下所示。

To have only positive values displayed in the tooltips, you further need to define a tooltips.callback.label functions as shown below.

tooltips: {
  callbacks: {
    label: (tooltipItem, data) => {
      let ds = data.datasets[tooltipItem.datasetIndex];
        return ds.label + ': ' + Math.abs( ds.data[tooltipItem.index]);
      }
    }
  },

请查看可运行的代码段下面并查看其工作原理（这是一个纯 Chart.js 解决方案，但它应该很容易适应 react-chart.js ）。

Please take a look at the runnable code snippet below and see how it works (this is a pure Chart.js solution but it should easily be adaptable to react-chart.js).

new Chart(document.getElementById('canvas'), {
  type: 'horizontalBar',
  data: {
    labels: ['a', 'b', 'c', 'd', 'e'],
    datasets: [{
        label: 'Pasien Masuk',
        data: [100, 90, 80, 70, 60],
        backgroundColor: 'red',
      },
      {
        label: 'Pasien Keluar',
        data: [-100, -90, -80, -70, -60],
        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
      }]
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="canvas"></canvas>

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