Question

关注one example我们可以格式化刻度线文本。我看到这被设置为multiline：默认为true，这很好，但我也希望能够控制断行发生的位置。有没有办法做到这一点？

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/billboard.js/dist/billboard.min.css" />
  <script src="https://cdn.jsdelivr.net/npm/billboard.js/dist/billboard.pkgd.min.js"></script>
  <title>JS Bin</title>
</head>

<body>
  <div id="tick"></div>
  <script>
    var chart = bb.generate({
      data: {
        x: "x",
        columns: [
          ["x", "2010-01-01", "2011-01-01", "2012-01-01", "2013-01-01", "2014-01-01", "2015-01-01"],
          ["sample", 30, 200, 100, 400, 150, 250]
        ]
      },
      size: {
        width: 500,
        height: 250
      },
      legend: {
        show: false
      },
      axis: {
        x: {
          height: 100,
          type: "timeseries",
          tick: {
          	rotate: -75,
            format: function (x) {
              return x.getFullYear() + ' control this line breaking ';
            }
          }
        }
      },
      bindto: "#tick",
    });
  </script>
</body>

</html>

Answer 1

对于svg文本节点，没有<br>。要换行，需要为每行文本添加一个<tspan>节点。

目前，您可以使用axis.x.tick.width选项来处理换行符。

axis: {
    x: {
        tick: {
            width: 80
        }
    }
},

Answer 2

更新-现在billboard.js supports multiline

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/billboard.js/dist/billboard.min.css" />
  <script src="https://cdn.jsdelivr.net/npm/billboard.js/dist/billboard.pkgd.min.js"></script>
  <title>JS Bin</title>
</head>

<body>
  <div id="tick"></div>
  <script>
    var chart = bb.generate({
      data: {
        x: "x",
        columns: [
          ["x", "2010-01-01", "2011-01-01", "2012-01-01", "2013-01-01", "2014-01-01", "2015-01-01"],
          ["sample", 30, 200, 100, 400, 150, 250]
        ]
      },
      size: {
        width: 500,
        height: 250
      },
      legend: {
        show: false
      },
      axis: {
        x: {
          height: 100,
          type: "timeseries",
          tick: {
          	//rotate: -20,
            format: function (x) {
              return x.getFullYear() + ' \ncontrol \nthis \nline \nbreaking ';
            }
          }
        }
      },
      bindto: "#tick",
    });
  </script>
</body>

</html>

在billboard.js

2 个答案: