如何制作多个水平条形图

问题描述

我想使用chartjs在水平反应中制作水平条形图，如下所示：chart i want to make

但是我最终却像这样chart i make 有人可以帮我吗，我是react和chartjs的新手

这是本文的续篇：How to make labels on both side from horizontal bar chart 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',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',}}
 />

解决方法

您应将两个轴都定义为stacked：

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

为了只看到在x轴刻度上显示的正值，您需要在x轴上定义一个ticks.callback函数。

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

要在工具提示中仅显示正值，您还需要定义一个tooltips.callback.label函数，如下所示。

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）。

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>

,

此摘要基于uminder的答案

new Chart(document.getElementById('canvas'),legend: {
      display: true,position: 'bottom',ticks: {
                    // Include a dollar sign in the ticks
                    callback: function(value,index,values) {
                        return value < 0? -(value) : value
                    }
                }
      }],yAxes: [{
        stacked: true
      }]
    },tooltips: {
            callbacks: {
                label: function(tooltipItem,data) {
                    var label = data.datasets[tooltipItem.datasetIndex].label || '';               
                    var value = tooltipItem.xLabel;
                    value = value < 0? -(value) : value
                    return label + ': ' + value;
                }
            }
        }
  }
});

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