Как добавить линию на график - PullRequest
Новая
       23

Как добавить линию на график

0 голосов
/ 07 июля 2019

Я использую C3 js для создания графика. На моем графике в настоящее время я использую столбцы стека для отображения данных.

Мой код, 

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

<script>

var chart = c3.generate({
    data: {
        columns: [
            ['Blue', 30, 200, 200, 400, 150, 250],
            ['Orange', 130, 100, 100, 200, 150, 50],
            ['Green', 230, 200, 200, 300, 250, 250]
        ],
        type: 'bar',
        groups: [
            ['Blue', 'Orange','Green']
        ]
    }
});

</script>

Согласно приведенному выше коду, диаграмма генерируется как,

enter image description here

Теперь мне нужно добавить еще 3 строки на график, как показано на рисунке ниже,

Как добавить линии на график с помощью C3 JS? Его документ имеет линейный график с гистограммой. Но я могу понять, как использовать это для моего требования.

Ответы [ 2 ]

2 голосов
/ 07 июля 2019

Вы можете использовать data.types, чтобы установить диаграмму для каждой информации. Прочитайте это: https://c3js.org/reference.html#data-types. И это пример кода для вашей проблемы. 

<script>

var chart = c3.generate({
    data: {
        columns: [
            ['Blue', 30, 200, 200, 400, 150, 250],
            ['Orange', 130, 100, 100, 200, 150, 50],
            ['Green', 230, 200, 200, 300, 250, 250],
            ['Black', 150, 160, 140, 145, 250, 100],
            ['Pink', 50, 50, 50, 50, 50, 50],
            ['Red', 400, 200, 150, 20, 300, 120]
        ],
        types:{
           Blue : 'bar',
           Orange : 'bar',
           Green : 'bar',
           Black : 'line',
           Pink : 'line',
           Red : 'line'
        },
        groups: [
            ['Blue', 'Orange','Green']
        ]
    }
});

</script>
1 голос
/ 07 июля 2019

Вот как вы можете достичь этого вместо type использовать types

var chart = c3.generate({
	bindto: '#chart',
	data: {
		columns: [
			['Blue', 30, 200, 200, 400, 150, 250],
 			['Orange', 130, 100, 100, 200, 150, 50],
			['Green', 230, 200, 200, 300, 250, 250],
      ['Black', 30, 200, 200, 400, 150, 250],
      ['Pink', 130, 100, 100, 200, 150, 50],
			['Red', 230, 200, 200, 300, 250, 250]
		],
		types: {
			 Blue : 'bar',
       Orange : 'bar',
       Green : 'bar',
       Black : 'line',
       Pink : 'line',
       Red : 'line'
		},
		groups: [
			['Blue','Orange', 'Green', 'Black','Pink', 'Red']
		],      
		axes: {
			Black: 'black',
			Pink: 'pink',
			Red: 'red',

			}
	},
	color: {
		pattern: ['#1f77b4', '#ff7f0e', '#2ca02c','#00000', '#ff69b4', '#ff0000']},
	axis: {
		black: {
			show: true 
		},pink: {
			show: true 
		},red: {
			show: true 
		}
	}
});
<!-- Load c3.css -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.2/c3.css" rel="stylesheet">

<!-- Load d3.js and c3.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.9.7/d3.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.2/c3.js"></script>
<div id="chart"></div>
...