Управление многострочным распространением тика по оси X в billboard.js

Question

Управление многострочным распространением тика по оси X в billboard.js

1

Следуя одному примеру, мы можем отформатировать тиковый текст. Я вижу, что это установлено в 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>

bgiuga 13 фев. 2018, в 12:56

Источник

Теги:

javascript

d3.js

billboard.js

2 ответа

0

UPDATE - billboard.js теперь поддерживает многострочный

<!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>

bgiuga 02 авг. 2018, в 07:12

Ещё вопросы

Jae Sung Park · Accepted Answer · 2018-02-14T01-34-00.000Z

Там нет <br> для SVG текстовых узлов. Для прерывания строки необходимо добавить узел <tspan> для каждой строки текста.

На данный момент вы можете обрабатывать разрывы строк с помощью опции axis.x.tick.width.

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

Сейчас я решил использовать это решение, хотя оно кажется скорее методом проб и ошибок.
@bgiuga, я согласен с этим. Обработка текста в SVG довольно раздражает.