在Chart.js中制作直方图
在Chart.js中制作直方图
提问于 2018-08-16 23:00:07
我们在代码库中使用Chart.js库，我需要创建一个直方图，这不是他们的默认图表类型之一。因此，我尝试覆盖条形图上的x轴刻度线，以便它们显示在每个条形图的左右角，而不是正下方。
在下面的示例中，通过在labels数组中添加额外的项并在options中显示第二个x轴，我已经获得了我想要的x轴。但是，因为现在有了一个额外的标签，条形图占据了宽度的四分之四，留下了一个不存在的数据点的空间。
有没有什么方法可以指定忽略丢失的数据点？或者抵消这些栅栏？还是我找错人了？
documentation有点难以解析，所以我不确定是否遗漏了什么简单的东西。
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知道一个解决方案，这将是理想的。
下面是我想要的最终结果的一个例子：
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-08-22 02:01:35
我相信您可以通过在x轴的ticks配置上使用max参数来获得您想要的结果。
通过使用2个不同的x轴和不同的最大值，您可以用不同的方式标记条形图。从而在不绘制额外的“空”条的情况下对条之间的标记进行标记。
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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51880101
复制相关文章
相似问题
腾讯云开发者
