Добавить метки или текст в подсказку - PullRequest
Новая
       36

Добавить метки или текст в подсказку

0 голосов
/ 29 октября 2019

Я пытаюсь добавить метки или больше текста / данных (не связанных с координатами x, y) при наведении курсора на точки данных в C3

Я не уверен, возможна ли такая функция с помощью c3 

<html>

<head>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css" rel="stylesheet" />

  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js"></script>

  <script type="text/javascript">
    onReady('#chart', function() {
      var chart = c3.generate({
        data: {
          x: 'x',
          //        xFormat: '%Y%m%d', // 'xFormat' can be used as custom format of 'x'
          columns: [
            ['x', '2014-01-01', '2014-01-02', '2014-01-03', '2014-01-04', '2014-01-05', '2014-01-06'],
            //            ['x', '20130101', '20130102', '20130103', '20130104', '20130105', '20130106'],
            ['data1', 30, 200, 100, 400, 150, 250],
            ['data2', 130, 340, 200, 500, 250, 350],
            ['data3', 70, 220, -200, 100, 600, 512]
          ],
          types: {
            data1: 'line',
            data2: 'line',
            data3: 'bar'
          },
          labels: {
            format: {
              data1: d3.format()
            }

          }

        },
        grid: {
          x: {
            show: false
          },
          y: {
            lines: [{
              value: 0
            }, {
              color: 'red'
            }]
          }
        },
        axis: {
          x: {
            type: 'timeseries',
            tick: {
              format: '%Y-%m-%d'
            }
          }
        }
      });
    });

    // Set a timeout so that we can ensure that the `chart` element is created.
    function onReady(selector, callback) {
      var intervalID = window.setInterval(function() {
        if (document.querySelector(selector) !== undefined) {
          window.clearInterval(intervalID);
          callback.call(this);
        }
      }, 500);
    }
  </script>
</head>

<body>
  <div id="chart"></div>
</body>

</html>

Я ожидал того же графика, но с любыми метками («A», «B», «C», «D», «E», «F»)как дополнительный текст внутри всплывающей подсказки или как метки рядом с точками.

Заранее спасибо.

1 Ответ

0 голосов
/ 01 ноября 2019 
 "tooltip": {
        'contents': function () {
            return "<div>Test</div>";
        }
    },

Для дальнейшего использования я прекратил работу с этим решением, и мне еще предстоит предварительно настроить html, чтобы получить то, что я хочу.

Также .d3 может быть включен в css следующим образом: 

d3-tip {
  line-height: 
  background-color: 
  font-weight: 
  padding: 10px 10px;
  background: rgba(#,#,#,#); 
  color: magenta;
  border-radius: 2px;
  border: 2px solid;
}
...