时间戳

首页 > 解决方案 > 从 0 开始的堆积条形图 - ChartJS React

javascript - 从 0 开始的堆积条形图 - ChartJS React

问题描述

我正在构建一个简单的水平条形图。对于每个标签，有两个数据。一个有重复，另一个没有重复。我想创建一个水平堆叠条，两个条都从 0 开始。

我设法创建了一个堆叠条，但第二个条从第一个条的末尾开始。我希望它从 0 开始。

我有的 在此处输入图像描述

例如：在银行业务中，我有两个数据，一个是具有价值的银行类别30。另一个是重复的银行业务43。条形加在一起，30+43。但是，我只希望两者都从 0 开始，以便13在 30 之后只出现 (43-30)。所以总数是 43，而不是 43+30

我想拥有什么

在此处输入图像描述

我的组件

function CategoriesCard({coming_props}){
const data = {
  labels: [
      'Email',
      'DoB',
      'Credit Card',
      'Passport Number',
      'Driver Licence',
      'National Insurance',
      'Banking',
      'Phone',
      'Address',
      'Postcode',
      'Social Media',
      'Organisation',
      'Location',
      'Nationality / belief',
      'Financial',
      'Ethnicity'
  ],
  datasets: [
      {
          label: 'Categories',
          stack: 'stack1',
          backgroundColor: '#04A9F5',
          borderColor: '#04A9F5',
          borderWidth: 1,
          hoverBackgroundColor: '#04A9F5',
          hoverBorderColor: '#04A9F5',
          data: [25, 21, 25, 25, 25, 28, 30,22, 21, 25, 25, 25, 28, 30,30,29],
    },
    {
        label: 'With duplicates',
        stack: 'stack1',
        backgroundColor: '#A8C6F5',
        borderColor: '#A8C6F5',
        borderWidth: 1,
        hoverBackgroundColor: '#A8C6F5',
        hoverBorderColor: '#A8C6F5',
        data: [34, 43, 12, 32, 42, 43, 43,22, 21, 25, 25, 25, 28, 30, 30, 29],
    }
  ],
};

const options = {
    maintainAspectRatio: false,
    scales: {
            xAxes: [{
                ticks: {
                    min: 0,
                    beginAtZero: true
                }
            }]
    }
}



return (
  <div style={{margin: '2%', height:'100%'}}>
    <Paper style={{height: '100%'}}>
      <h3>CATEGORIES</h3>
        <div style={{height: '90%', width:'90%'}}>
            <HorizontalBar
            data={data}
            options={options}
            height={500}
            width={200}
            />
        </div>
    </Paper>
  </div>
  )
}

export default CategoriesCard

我做了什么

我计算了两个数据数组（categories和with duplicates）之间的差异并将其分配给我的第二个数据。

例子：

let data_categories = [25, 21, 25]
let data_duplicates = [34, 43, 35]

let final_data = [(34-35), (43-21), (35-25)]

它确实可以修复条形尺寸，但如果我将鼠标悬停在它上面，它会显示差异而不是初始实数。

标签： javascriptreactjschart.jsreact-chartjs

解决方案

您创建具有较低值和较高值之间差异的数据集的解决方案也是我必须解决此问题的方法。至于悬停时的工具提示，我在 options.tooltips.callbacks 中创建了一个标签回调，如下所示：

options: {
  tooltips: {
    callbacks: {
      label: function(tooltipItem, data) {
        var label = data.datasets[tooltipItem.datasetIndex].label;
        if (label === 'With duplicates') {
          var total = tooltipItem.xLabel + data.datasets[0].data[tooltipItem.datasetIndex];
          return label + ': ' + total;
        }
        return label + ': ' + tooltipItem.xLabel;
      }
    }
  }
}

参数tooltipItem和data使用发送到<canvas>标签的数据集自动为您填充（我建议在测试期间将这些对象记录在回调中，以查看它们包含的内容）。您可以在此处找到使用工具提示可以做的各种有趣的事情：https ://www.chartjs.org/docs/latest/configuration/tooltip.html

推荐阅读