Как преодолеть проблемы моделирования по оси X, когда несколько значений по оси X с одной точкой для загрузки на графике C3? - PullRequest
Новая
       21

Как преодолеть проблемы моделирования по оси X, когда несколько значений по оси X с одной точкой для загрузки на графике C3?

2 голосов
/ 14 апреля 2020
  • C3 версия : 0,7.12
  • D3 версия : 5.15.0
  • Браузер : Chrome
  • OS : MA C

Codepen ссылка 

var chart = c3.generate({
      bindto: '#c3',
    data: {
        x: 'x',
        columns: [
            ['x', '2013-01-10'],
            ['sample', 30]
        ]
    },
    axis: {
        x: {
            type: 'timeseries',
            tick: {
                // this also works for non timeseries data
                values: ['2013-01-01', '2013-01-02', '2013-01-03', '2013-01-04','2013-01-05', '2013-01-10', '2013-01-11', '2013-01-12','2013-01-13', '2013-01-14', '2013-01-15']
            }
        }
    }
      });

Когда у вас есть несколько значений для отметок по оси X, и есть одна точка для загрузки на графике, заканчивающаяся наложением временных меток.

Screen Shot 2020-04-02 at 10 29 51 AM

Эта проблема не возникнет, если у вас более одной точки загрузить в том же графике. Как решить эту проблему, если у вас есть одна точка сначала для некоторого времени, а затем вторая точка загружается после определенного периода времени?

1 Ответ

1 голос
/ 15 апреля 2020

Вы можете решить эту проблему, удалив значения галочек для оси x и заменив их форматом (вы уже определили дату в данных x): 

axis: {
      x: {
           type: 'timeseries',
           tick: {
              format: '%Y-%m-%d'
           }
       }
}

Пожалуйста, посмотрите на исполняемый фрагмент ниже. Я добавил функцию Timeout для демонстрации. 

var chart = c3.generate({
      bindto: "#root",
      data: {
        x: "x",
        columns: [
          ["x", "2013-01-10"],
          ["sample", 30]
        ]
      },
      axis: {
        x: {
          type: "timeseries",
          tick: {
            format: "%Y-%m-%d"
          }
        }
      }
    });
    
   setTimeout(function () {
        chart.load({
        columns: [
            ['x', '2015-01-09', '2015-01-10', '2015-01-11'],
            ['sample', 20, 30, 45],
        ],
        duration: 50,
    });
}, 3500);
<head>
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.15/c3.min.css">
</head>
<body>
<div >
  <div root>
    <div rootRoot id="root" style="width: 95%; height: 200px"></div>
    <div rootRoot id="root_2" style="width: 95%; height: 200px"></div>
  </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.15.0/d3.min.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.15/c3.min.js"></script>
</body>

Если вы уже хотите отображать все отметки времени по оси x в начале, когда присутствует только одна точка данных, вы можете добавить «ноль» к строке данных: 

data: {
    x: 'x',
    columns: [
        ['x', '2013-01-05', '2013-01-10', '2013-01-11', '2013-01-12'],
        ['sample', null, 30, null, null]
    ]
}

Ниже исполняемого фрагмента: 

var chart = c3.generate({
      bindto: "#root",
      data: {
        x: "x",
        columns: [
          ['x', '2013-01-08', '2013-01-10','2013-01-11', '2013-01-12'],
          ['sample', null, 30, null, null]
        ]
      },
      axis: {
        x: {
          type: "timeseries",
          tick: {
            format: "%Y-%m-%d"
          }
        }
      }
    });
    
   setTimeout(function () {
        chart.load({
        columns: [
            ['x', '2013-01-08', '2013-01-10','2013-01-11', '2013-01-12'],
            ['sample', 20, 30, 15, 25],
        ],
        duration: 50,
    });
}, 3500);
<head>
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.15/c3.min.css">
</head>
<body>
<div >
  <div root>
    <div rootRoot id="root" style="width: 95%; height: 200px"></div>
    <div rootRoot id="root_2" style="width: 95%; height: 200px"></div>
  </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.15.0/d3.min.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.15/c3.min.js"></script>
</body>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...