当前位置: 首页 > 知识库问答 >
问题:

使用图表。js版本3,如何左对齐堆叠条形图上的y轴标签?

周和安
2023-03-14

我使用的是图表.js版本 3。我需要在堆叠条形图的 y 轴上左对齐标签。如何实现这一点?

共有1个答案

申屠宏胜
2023-03-14

如文档中所述,这可以使用< code>crossAlign属性来完成:

var options = {
  type: 'bar',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
      label: '# of Votes',
      data: [12, 19, 3, 5, 2, 3],
      backgroundColor: 'pink'
    }]
  },
  options: {
    indexAxis: 'y',
    scales: {
      y: {
        ticks: {
          crossAlign: 'far'
        }
      }
    }
  }
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.6.0/chart.js"></script>
</body>
 类似资料:
  • 我创建了一个水平条形图w/chart.js,需要在y轴上创建两组标签,但只能创建一个。 例如,参见下图,在y轴上,我有一组单词“other”和“paper ”,计数分别为2和3;在这个分组和下面的两个分组中,我还需要显示与这两个词相关的月份——比如五月。 有办法做到这一点吗? 附言:在附加的图像中,我将镜像设置为true,但如果解决方案能给我所需的输出,我愿意关闭镜像。 到目前为止,我已经查看了这

  • 我试图在3.2.0中创建一个混合堆叠的水平条形图和折线图Charts.js。 预期行为:一个轴在底部的堆叠条,包括轴标题和一个轴在顶部的折线图。 实际行为:底部的所有轴都显示了一个额外的轴,该轴似乎与任何数据集都不对应。不显示轴标题。 注意:代码中有几个条形的值为零,根据生成的数据,这些值可以是非零的。 我的代码: jsfiddle 当前行为的屏幕截图

  • 我使用MPAndroidChart条形图...除了x轴,其他都没问题...标签上的条形没有正确对齐。当我缩放图表时,条形图出现在它的标签上,但这种缩放不是我想要的,当我缩放标签时,标签会重复,直到下一个,以此类推。我的数据就像是eg: 年龄是我的标签,它是字符串类型...我需要它是字符串标签。 这是我的c代码# 对于条入口的x位置,我只使用一个称为c的整数,它在每个循环中增加1,所以它给出了0f,

  • 关于我的图表,我有以下问题/疑问: > 如何防止正确的 y 轴刻度值被部分删除或进入图表内部? 当我使用yValuesTripId作为左和右y轴域的域时,图表绘制得很好。如何使用yAxisFirstStopTimes作为左y轴域值和yAxisLastStopTimes作为右y轴值使其绘制精细? 您可以单击此处查看或编辑图表: 代码如下:

  • 我正在创建一个JFreeChart堆叠区域图表。 我希望我的y轴标签的宽度是固定的,我不想移动图表随着宽度的增加。见说明问题的图像。 我也面临着JFreeChart论坛上发布的类似问题。根据论坛,它是固定的,但它还没有发布。有没有人知道它的解决办法。我们迫不及待地等待下一个版本,有谁知道我们可以应用的黑客吗? 希望能找到解决办法。

  • 我的x轴值没有对齐。我应该修改什么设置? x轴未对齐 下面是我到目前为止在代码中使用的。setLabelsToSkip将无法工作,因为我使用的是3.0.1版。 这是我的标签格式化程序类: 以下是我的主要活动setdata方法: 在我的主要活动中,我像这样使用它: