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

Chart.js中的水平x轴标签

微生良策
2023-03-14

我正在使用一个chart-js条形图,它必须放在一个小的div中,所以我在寻找一种方法来使x轴上的标签水平而不是对角线。重点是为实际的条获得尽可能多的高度,因为现在标签占据了几乎40%的可用空间。

这是我的代码:

let options = {
    responsive: true,
    maintainAspectRatio: false,
    scales: {
        yAxes: [{
            ticks: {
                beginAtZero: true
            }
        }],
        xAxes: [{
            display: false
        }]
    }
};
let ctx = document.getElementById('barChartCtx');
let barChart = new Chart(ctx, {
    type: 'bar',
    data: data,
    options: options
});

我已经暂时禁用了xAxis标签。它的工作,但理想情况下,我希望他们是水平的。想法?

共有1个答案

诸新霁
2023-03-14

您可以使用刻度< code>maxRotation和< code>minRotation属性来控制这一点。

这是一个例子。

let options = {
    responsive: true,
    maintainAspectRatio: false,
    scales: {
        yAxes: [{
            ticks: {
                beginAtZero: true
            }
        }],
        xAxes: [{
            ticks: {
                minRotation: 0,
                maxRotation: 0
            }
        }]
    }
};

请记住,它们是对角线的原因是因为chart.js计算出它们不适合默认的水平方向。如果你发现它们在水平时互相溢出,那么你仍然可以使用上面的属性来调整旋转,使它们只是稍微倾斜。

 类似资料:
  • 我试图设置一个固定的范围为单条,水平条形图在Chart.JS 标记数组仅在垂直轴上工作,但我希望在X轴上有一组固定的标签。 示例:https://altonwells.webflow.io/chart-js

  • 我目前正在尝试从blockchain.info获取数据,并在一个简单的JavaScript文件中的Chart.js上显示它。 如果我的xAxes类型是“线性”的,它就工作得很好,但是在这种情况下,x轴上的标签显示的是数字unix时间戳。 我希望标签按天显示(如2018年1月27日)或按月分组(图表上30个点,1个标签- "未捕获的错误:找不到Chart.js - Moment.js!您必须将其包含

  • 在图表中。js,有没有办法在图表中的水平条内写入标签?例如: 在图表中是否有类似的情况。js? 谢谢

  • 注意:即使某些“区域”没有值,也应该显示标签0、0.1、0.2、0.3、0.4和0.5。我尝试了我的不同选项,我发现的“最佳”是控制要显示的标签数量,但它不是我想要的:

  • 我一直试图绘制时间序列数据(来自温度传感器)使用Chart.js库。python应用程序使用Flask将值和标签列表传递到. html模板文件。 经过一些迭代之后,我设法以正确的时间格式获得标签——现在由图表“newdate()”处理——并在绘制的图表X轴刻度上被视为有效日期。 然而,读数在X轴上等间距(刻度分布是线性的),而不是按时间间隔。打印刻度的格式也需要截断为HH: mm: ss(因为数据

  • 问题内容: 我正在使用matplotlib / pylab Python模块创建非常简单的图表。标记Y轴的字母“ y”在其侧面。如果标签较长(例如单词),则不会出现这种情况,以免将图形的外部扩展到左侧过多。但是对于一个字母的标签,这没有意义,标签应该是直立的。我的搜索空白。如何水平打印“ y”? 问题答案: 这很简单。绘制标签后,您可以简单地更改旋转角度: 或者,您可以将旋转作为参数传递,即