在Chart.js中制作直方图 [英] Make a Histogram in Chart.js

问题描述

我们在代码库中使用了 Chart.js 库，我需要创建一个直方图，它们的默认图表类型之一。因此，我尝试覆盖条形图上的x轴刻度线，以使其出现在每个条形的左，右角，而不是直接在其下方。

We use the Chart.js library in our codebase and I need to create a histogram, which is not one of their default chart types. So I'm attempting to override the x-axis tick marks on a bar chart so that they appear at the left and right corners of each bar instead of directly underneath.

在下面的示例中，通过在 labels 数组中添加一个额外的项并在<$ c中显示第二个x轴，获得了所需的x轴$ c>选项。但是，由于现在有了一个额外的标签，这些条形占据了宽度的4/5处，为不存在的数据点留出了空间。

In the below example I've gotten the x-axis how I want it by adding an extra item in the labels array and displaying a second x-axis in the options. But, because there's now an extra label, the bars are taking up 4/5ths of the width, leaving space for a non-existent data point.

是否有某种方式我可以指定忽略丢失的数据点？或抵消酒吧？还是我在吠错树？

Is there some way that I can specify to ignore the missing data point? Or offset the bars? Or am I barking up the wrong tree?

文档很难解析，所以我不确定是否缺少简单的东西。

The documentation is a little hard to parse through, so I'm not sure if there's something simple I'm missing.

var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: [0, 1, 2, 3, 4],
    datasets: [{
      label: 'Group A',
      data: [12, 19, 3, 5],
      backgroundColor: 'rgba(255, 99, 132, 1)',
    }]
  },
  options: {
    scales: {
      xAxes: [{
        display: false,
        barPercentage: 1.30,
      }, {
        display: true,
      }],
      yAxes: [{
        ticks: {
          beginAtZero:true
        }
      }]
    }
  }
});

canvas { max-width: 200px; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<canvas id="myChart" width="20" height="20"></canvas>

编辑：我知道还有其他库可以达到类似的目的，我正在寻找其他选择。但是，我已发布了此信息，以防万一有人通过Chart.js知道解决方案，这是理想的选择。

I realize there are other libraries that could achieve something similar and I am looking into other options. But, I've posted this just in case someone out there knows of a solution via Chart.js, which would be ideal.

以下是最终结果的一个示例我要去的是：

Here's an example of what the end result I'm going for is:

< img src = https://i.stack.imgur.com/BXF3C.png alt =在此处输入图片描述>

推荐答案

我相信您可以通过在标记 max 参数来获得所需的结果> x轴的配置。

I believe you can get the result you want by using the max parameter on the ticks configuration of the x axes.

通过使用两个具有不同最大值的x轴，您可以将条形标签的绘制方式与绘制方式不同。导致在条之间标记标记而没有绘制额外的空条。

By using 2 different x axes with different maximums you can label the bars differently from how they're drawn. Resulting in labeling the marks in between the bars without drawing an extra "empty" bar.

var ctx = document.getElementById("myChart").getContext('2d');
var dataValues = [12, 19, 3, 5];
var dataLabels = [0, 1, 2, 3, 4];
var myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: dataLabels,
    datasets: [{
      label: 'Group A',
      data: dataValues,
      backgroundColor: 'rgba(255, 99, 132, 1)',
    }]
  },
  options: {
    scales: {
      xAxes: [{
        display: false,
        barPercentage: 1.3,
        ticks: {
            max: 3,
        }
     }, {
        display: true,
        ticks: {
            autoSkip: false,
            max: 4,
        }
      }],
      yAxes: [{
        ticks: {
          beginAtZero:true
        }
      }]
    }
  }
});

canvas { max-width: 200px; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<canvas id="myChart" width="20" height="20"></canvas>

这篇关于在Chart.js中制作直方图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！