Question

我正在使用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>

根据上面的代码，图表生成为

现在，我需要向该图表添加另外3条线，如下图所示，

如何使用C3 JS向图表添加折线？其document具有一些带有条形图的折线图。但是我可以理解如何根据自己的需求使用它。

Answer 1

您可以使用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>

Answer 2

在这里您可以使用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>

如何在图表上添加折线

2 个答案: