水平条形图在Chart.js中x轴上自定义标注/固定范围？
我试图设置一个固定的范围为单条，水平条形图在Chart.JS
标记数组仅在垂直轴上工作，但我希望在X轴上有一组固定的标签。
示例：https://altonwells.webflow.io/chart-js
var ctx = document.getElementById('SATScoreGraph2').getContext('2d');
var myBarChart = new Chart(ctx, {
type: 'horizontalBar',
data: {
labels: [""],
datasets: [{
barThickness: 48,
barPercentage: 0.7,
categoryPercentage: 1.0,
backgroundColor: ["#ff6f47"],
data: [1480]
}]
},
options: {
indexAxis: 'x',
title: {
display: false,
text: 'Average SAT Score'
},
legend: {
display: true
},
tooltips: {
enabled: false
}
}
});<html>
<body>
<canvas id="SATScoreGraph2"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
</body>
</html>共有2个答案
这就是我的工作
options: {
scales: {
x: {
min: 0,
max: 100,
display: false,
},
}
}
显示等于false已设置，因为如果没有，则会出现另一个比例尺，低于我为数据选择的比例尺。根据文档：
最小值:用户定义的最小刻度数，覆盖数据中的最小值。
最大值:用户定义的最大刻度数，覆盖数据中的最大值。
ReAd ThE DoCuMEnTaTIoN
https://www.chartjs.org/docs/latest/axes/cartesian/linear.html
options: {
indexAxis: 'x',
title: {
display: false,
text: 'Average SAT Score'
},
legend: {
display: true
},
tooltips: {
enabled: false
},
scales: {
xAxes: [{
ticks: {
suggestedMin: 800,
suggestedMax: 1600
}
}]
}
}
-
这是柱状图的图片。正如您所看到的，存在对齐问题，条形图没有与标签对齐，尤其是在中间部分。此外，我希望底部轴显示10的条形图，而不是1.2、1.4、1.6等，因为不会有任何小数，所以它没有用处。我还希望每个条的值在末尾显示为一个数字，以显示每个条的总计数。 图表https://imgur.com/gallery/ThHx1eJ图片 样式设置
-
我正在使用一个chart-js条形图，它必须放在一个小的div中，所以我在寻找一种方法来使x轴上的标签水平而不是对角线。重点是为实际的条获得尽可能多的高度，因为现在标签占据了几乎40%的可用空间。 这是我的代码： 我已经暂时禁用了xAxis标签。它的工作，但理想情况下，我希望他们是水平的。想法？
-
我有两个独立的条形图，但我希望两者都有相同的X轴位置。也就是说，我需要两个水平轴在相同的高度。 两个图表具有相同的高度，使用属性： < li >图表 软件：SSRS 2008R2（Microsoft报告服务） 提前感谢。
-
注意：即使某些“区域”没有值，也应该显示标签0、0.1、0.2、0.3、0.4和0.5。我尝试了我的不同选项，我发现的“最佳”是控制要显示的标签数量，但它不是我想要的：
-
我试图在3.2.0中创建一个混合堆叠的水平条形图和折线图Charts.js。 预期行为：一个轴在底部的堆叠条，包括轴标题和一个轴在顶部的折线图。 实际行为：底部的所有轴都显示了一个额外的轴，该轴似乎与任何数据集都不对应。不显示轴标题。 注意:代码中有几个条形的值为零，根据生成的数据，这些值可以是非零的。 我的代码： jsfiddle 当前行为的屏幕截图
-
我创建了一个水平条形图w/chart.js，需要在y轴上创建两组标签，但只能创建一个。 例如，参见下图，在y轴上，我有一组单词“other”和“paper ”,计数分别为2和3；在这个分组和下面的两个分组中，我还需要显示与这两个词相关的月份——比如五月。 有办法做到这一点吗？ 附言：在附加的图像中，我将镜像设置为true，但如果解决方案能给我所需的输出，我愿意关闭镜像。 到目前为止，我已经查看了这