Highcharts 甘特图 Y 轴标签左对齐未填充

Question

我们使用 Y 轴包含树形网格的甘特图。 我们希望将树形网格中的标签左对齐，但标签粘在单元格的边框上。我们想让左侧填充，但选项（x，填充...）

labels:{
        align: 'left',
        x: 15,
        padding: 15
     },

好像没有什么效果。

以下示例显示了该问题：https://jsfiddle.net/vegaelce/809a6b5z 在每个标签前面留一个空格的正确语法是什么？

Answer 1

您可以使用 CSS 样式添加填充。只需将

useHTML: true

添加到

yAxis.labels

并通过

div

属性将带有样式的

columns.labels.format

应用到您想要的所有网格列：

yAxis: {
  ...
  labels: {
    useHTML: true
  },
  grid: {
    ...
    columns: [{
      title: {
        text: 'Project'
      },
      labels: {
        format: '<div style="padding: 0 15px;">{point.name}</div>'
      }
    }, {
      title: {
        text: 'Assignee'
      },
      labels: {
        format: '<div style="padding: 0 15px;">{point.assignee}</div>'
      }
    },
    ...
   ]
  }
}

演示：https://jsfiddle.net/BlackLabel/9snhxfru/
API：https://api.highcharts.com/gantt/xAxis.labels.useHTML