Диаграмма Javascript C3 создает диаграмму сдвига - PullRequest
Новая
       80

Диаграмма Javascript C3 создает диаграмму сдвига

0 голосов
/ 24 мая 2018

Я использую диаграмму C3js для создания диаграммы смещения, как показано ниже:

enter image description here

Вот мой формат данных: 

var dataItems = [
{
  "title": "2017/02/04",
  "shifts": [
    {
      "startTime": "05:30:00",
      "endTime": "05:30:00",
      "items": [
        {
          "quantities": {
            "itemA": 600       
           }        
        },
        {
          "quantities": {
            "itemB": 400   
           }    
        },{
          "quantities": {
            "itemC": 500      
           }                                 
        },
      ]
    }
  ]
},
{
  "title": "2017/04/04",
  "shifts": [
    {
      "startTime": "05:30:00",
      "endTime": "05:30:00",
      "items": [
        {
          "quantities": {
            "itemA": 720     
           }          
        },
        {
          "quantities": {
            "itemB": 1000   
           }    
        },{
          "quantities": {
            "itemC": 850     
           }                                  
        },
      ]
    }
  ]
},
{
  "title": "2017/05/04",
  "shifts": [
    {
      "startTime": "05:30:00",
      "endTime": "05:30:00",
      "items": [
        {
          "quantities": {
            "itemA": 450    
           }           
        },
        {
          "quantities": {
            "itemB": 800   
           }    
        },{
          "quantities": {
            "itemC": 1000   
           }                               
        },
      ]
    }
  ]
}
];

Я пробовал похожий пример: JsFiddle .но это не работает хорошо.Идеи. Я хочу создать гистограмму, например, в формате xAxis, например, на изображении.

Может ли кто-нибудь подсказать мне данные или пример, подобные приведенным выше диаграммам смещения?

Спасибо,

1 Ответ

0 голосов
/ 24 мая 2018

Ваш код для настройки положения меток по оси X является правильным.
Просто включите его в функцию и вызовите, когда будет нарисован график.

Смотрите это fiddle или этот фрагмент: 

var chart = c3.generate({
    ...
    onrendered: pushTheYearsDown,
    onresized: pushTheYearsDown
});

и 

// push the years down
function pushTheYearsDown() {
  d3.selectAll('#chart .tick text tspan')[0].forEach(function (d) {
      var tspan = d3.select(d);
      if (!isNaN(Number(tspan.text())))
          tspan.attr('dy', '2em')
      else 
          tspan.attr('dy', '0.5em')
  });
}
...