Создание гистограммы с накоплением для оси X временных рядов с помощью C3.js - PullRequest
Новая
       18

Создание гистограммы с накоплением для оси X временных рядов с помощью C3.js

0 голосов
/ 13 ноября 2018

Я пытаюсь создать эту столбчатую диаграмму с накоплением (используя C3.js), как на этой картинке, которая представляет собой столбчатую диаграмму с накоплением для временных рядов.

Desired chart
Моя текущая конфигурация: `

{
    data: {
        json: [
            {
                "calendar_date": "2018-11-01",
                "segment_description": "Executive Suite",
                "before_otb": 2,
            },
            {
                "calendar_date": "2018-11-01",
                "segment_description": "Handicapped Room",
                "before_otb": 3,
            },
            {
                "calendar_date": "2018-11-01",
                "segment_description": "Junior Suite",
                "before_otb": 5,
            }
        ],
        type: 'bar',
        keys: {
            x: 'calendar_date',
            value: ['before_otb']
        },
    },
    axis: {
        x: {
            type: 'timeseries'
        }
    }
}

`

1 Ответ

0 голосов
/ 13 ноября 2018

Вам нужно будет поработать над макетом данных и перейти к использованию групп.Аналогично ниже. 

var chart = c3.generate({
data: {
    x: "x-axis",
    json:[
        { "x-axis": "0",
            "data1": 30,
            "data2": 40,
            "data3": 20,
            "data4": 10,
            "data5": 50,
            "data6": 40
        },
        { "x-axis": "1",
            "data1" :20,
            "data2": 60,
            "data3": 10,
            "data4": 15,
            "data5": 40,
            "data6": 20,
        }],
       // etc etc
        keys: {
            x: "x-axis",
            value: ["data1", "data2", "data3", "data4", "data5", "data6"]
        },
                groups: [
            ["data1", "data2", "data3", "data4", "data5", "data6"]
    ],
    type: 'bar'
}
});
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.6.8/c3.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.6.8/c3.min.js"></script>

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