如何在图表中添加线条

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>

如何在图表中添加线条

How to add line to chart

javascript

charts

c3.js