javascript - 如何在图表中添加线条

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 在图表中添加线条？它的文档有一些带有条形图的折线图。但我可以理解如何使用它来满足我的要求。

标签： javascriptchartsc3.js

Answer 1

以下是如何实现它而不是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>