C3.js将折线图Y轴的标签位置更改为Y轴的中心

本文介绍了C3.js将折线图Y轴的标签位置更改为Y轴的中心的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我需要在Y轴上更改Y轴的标签位置，当前的六个位置选项无法满足我的情况，我也尝试使用d3对其进行自定义，但仍然没有运气.

I need to change the Y axis's label position upon the Y axis, the current six position options can't meet my scenario, I also tried to customize it with d3 but still without luck.

我创建了 plnkr 演示，并在.

  var chart = c3.generate({
  data: {
      columns: [
          ['data', 30, 200, 100, 400, 150, 250]
      ]
  },
  axis: {
      y: {
          label: {
              text: 'Y Axis Label',
              position: 'outer-top'
          }
      }
   }
 });

有人知道怎么做吗?

非常感谢.

推荐答案

与您所说的不同，您可以使用D3对其进行自定义.只需选择标签(按类别)并设置transform:

Unlike what you said, you can customize it with D3. Just select the label (by class) and set the transform:

d3.select(".c3-axis-y-label").attr("transform", "translate(25,30)")

这是演示:

// Code goes here
(function() {

  var chart = c3.generate({
    padding: {
      top: 10
    },
    data: {
      columns: [
        ['data', 30, 200, 100, 400, 150, 250]
      ]
    },
    axis: {
      y: {
        label: {
          text: 'Y Axis Label',
          position: 'outer-top'
        }
      }
    }
  });

  d3.select(".c3-axis-y-label").attr("transform", "translate(25,30)")


})();

<head>
  <link rel="stylesheet" href="https://unpkg.com/[email protected]/c3.css">
  <link rel="stylesheet" href="style.css">
  <script src="https://unpkg.com/[email protected]/d3.js"></script>
  <script src="https://unpkg.com/[email protected]/c3.js"></script>
</head>

<body>
  <div id="chart"></div>
  <script src="script.js"></script>
</body>

这篇关于C3.js将折线图Y轴的标签位置更改为Y轴的中心的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！