Question

我使用Chart.JS 1.0.2创建折线图：

我尝试做的是将图表底部的标签移动到每个矩形的中心（而不是与垂直网格线对齐）：

chartjs.org上没有关于此的文档，但我相信通过智能技巧可以轻松解决此问题。关于如何实现这一点的任何想法？

Answer 1

offsetGridLines（boolean）如果为true，则标签将移动到网格线之间。

type: 'line',
data: data,
options: {
    ...
    scales: {
        xAxes: [{
            gridLines: {
                offsetGridLines: true
            }
        ]}
    }
}

Answer 2

在ChartJS Documentation中，在“网格线配置”下有drawOnChartArea选项：

名称：drawOnChartArea
  输入：boolean
  描述：如果为true，则在轴线内的图表区域上绘制线条。当有多个轴并且您需要控制绘制哪些网格线时，这很有用

{
    type: 'line',
    data: data,
    options: {
        ...
        scales: {
            xAxes: [{
                gridLines: {
                    drawOnChartArea: true
                }
            ]}
        }
    }
}

Answer 3

有点晚了，但希望能对某人有所帮助。

我的问题是试图强制使用type: 'bubble'的图表和使用type: 'linear'的x轴将标签放置在网格线的中心。与条形图一样，带有type: 'category'的轴的标准功能是“使标签居中”。通过定义两个xAxes而不显示线性的标签，可以使用类别样式标签获得线性的点放置。

在此示例中，将在整整365天的时间内绘制点，每个季度的x轴刻度线，并且四分之一标签位于其图的区域内。

data: {
    xLabels: ['Q1', 'Q2', 'Q3', 'Q4'],
    ...
}, 
options: {
    scales: {
        xAxes: [
            {
                id: 'xAxis1',
                type: 'linear',
                display: false,
                ticks: {
                    min: 0,
                    max: 365,
                    stepSize: 365 / 4
                }
            },
            {
                id: 'xAxis2',
                type: 'category',
                gridLines: {
                    offsetGridLines: true
                },
                scaleLabel: {
                    display: true,
                    labelString: 'Day of Year'
                }
            }
        ],
        ...
    }
}

我已将其用于chart.js 2.x。

如何将Chart.JS折线图标签与中心对齐

3 个答案: