无法在c3.js中一起创建散点图和折线图

Question

请指导我做错了什么。我使用c3.js在我的网页中显示图表。现在，我有要求在哪里需要显示样条线和散点图图表together.I已在c3.js中搜索并遇到组合图表（http://c3js.org/samples/chart_combination.html）。但是，当我将它用于散射和样条曲线图表并不

未来下面是我的代码

<!-- Load c3.css --> 
<link href="c3.css" rel="stylesheet" type="text/css"> 

<!-- Load d3.js and c3.js --> 
<script src="d3.js" charset="utf-8"></script> 
<script src="c3.js"></script> 

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


<script> 
var chart = c3.generate({ 
    data: { 
     xs: { 
      setosa: 'setosa_x', 
     }, 
     // iris data from R 
     columns: [ 
      ["setosa", 3.0, 3.0, 3.2, 3.1, 3.6, 3.9, 3.4, 3.4, 2.9, 3.1, 3.7, 3.4, 3.0, 3.0, 4.0, 4.4, 3.9, 3.5, 3.8, 3.8, 3.4, 3.7, 3.6, 3.3, 3.4, 3.0, 3.4, 3.5, 3.4, 3.2, 3.1, 3.4, 4.1, 4.2, 3.1, 3.2, 3.5, 3.6, 3.0, 3.4, 3.5, 2.3, 3.2, 3.5, 3.8, 3.0, 3.8, 3.2, 3.7, 3.3], 
      ["setosa_x", 3.2, 3.2, 3.1, 2.3, 2.8, 2.8, 3.3, 2.4, 2.9, 2.7, 2.0, 3.0, 2.2, 2.9, 2.9, 3.1, 3.0, 2.7, 2.2, 2.5, 3.2, 2.8, 2.5, 2.8, 2.9, 3.0, 2.8, 3.0, 2.9, 2.6, 2.4, 2.4, 2.7, 2.7, 3.0, 3.4, 3.1, 2.3, 3.0, 2.5, 2.6, 3.0, 2.6, 2.3, 2.7, 3.0, 2.9, 2.9, 2.5, 2.8], 
      ['data3', 300, 200, 160, 400, 250, 250], 
     ], 
     type: 'scatter', 
     types: { 
      data3: 'spline', 
     }, 
    }, 
    axis: { 
     x: { 
      label: 'Sepal.Width', 
      tick: { 
       fit: false 
      } 
     }, 
     y: { 
      label: 'Petal.Width' 
     } 
    } 
}); 

</script> 

感谢

Answer 1

我也想知道。

• 要将折线图绘制在与散点图相同的x轴上，您需要一个x轴并将其设置为与散点图相同的轴。 setosa_x数据不必按顺序排列，但它应该是这样的，以便您可以在共享的x轴上制作有用的折线图。这也影响了setosa的定义。
• 因为x轴会有几个相同的数字，所以您需要给行数据一些空值。
• 你需要给散点图和折线图不同的坐标轴{}来工作（y和y2）。还需要为每个设置最小值和最大值。

您可以剪切并粘贴在阵列成M Excel中的数据，并责令chronoligically

var chart = c3.generate({ 
    data: { 
     x:'setosa_x', 
     xs: { 
      setosa: 'setosa_x', 
     }, 
     // iris data from R 
     columns: [ 
      //['x',2.3,2.9,3.0,3.0,3.0,3.0,3.0,3.0,3.1,3.1,3.1,3.1,3.2,3.2,3.2,3.2,3.2,3.3,3.3,3.4,3.4,3.4,3.4,3.4,3.4,3.4,3.4,3.4,3.5,3.5,3.5,3.5,3.5,3.6,3.6,3.6,3.7,3.7,3.7,3.8,3.8,3.8,3.8,3.9,3.9,4.0,4.1,4.2,4.4], 
      ['data3', 100, 200, 300, null, null, 200, null, 160, 400, 250, 250,100, 200, 300, 200, 160, 400, 250, 250,100, 200, 300, 200 ], 
      ["setosa_x",2.3,2.9,3.0,3.0,3.0,3.0,3.0,3.0,3.1,3.1,3.1,3.1,3.2,3.2,3.2,3.2,3.2,3.3,3.3,3.4,3.4,3.4,3.4,3.4,3.4,3.4,3.4,3.4,3.5,3.5,3.5,3.5,3.5,3.6,3.6,3.6,3.7,3.7,3.7,3.8,3.8,3.8,3.8,3.9,3.9,4.0,4.1,4.2,4.4], 
      ["setosa", 0.2, 0.2, 0.2, 0.2, 0.2, 0.4, 0.3, 0.2, 0.2, 0.1, 0.2, 0.2, 0.1, 0.1, 0.2, 0.4, 0.4, 0.3, 0.3, 0.3, 0.2, 0.4, 0.2, 0.5, 0.2, 0.2, 0.4, 0.2, 0.2, 0.2, 0.2, 0.4, 0.1, 0.2, 0.2, 0.2, 0.2, 0.1, 0.2, 0.2, 0.3, 0.3, 0.2, 0.6, 0.4, 0.3, 0.2, 0.2, 0.2, 0.2], 
      ], 
      axes: { 
       // setosa_x: 'x', 
       setosa: 'y2', 
       data3: 'y' 
      }, 
      type: 'scatter', 
      types: { 
       data3 : 'spline' 
      } 
    },  
    axis: { 
     y: { 
      min: 35, 
      show: true 
     }, 
     y2: { 
      max: 0.5, 
      show: true 
     }  
    }     
}); 

Answer 2

以上回答对我来说是一个有益的开端，但它最终关闭点。 C3系统允许指定多个图表类型，而不必求助于创建多个y轴，这几乎总是可以避免的，因为以这种方式操纵推理太容易了（想想截断一个轴以增加变化的外观或反之亦然）。

只需为要绘制的每个系列分别添加x和y值，并参考数据对象中参数types中需要绘制的图表类型。请看下图：

var setosa_x = [2.3,2.9,3.0,3.0,3.0,3.0,3.0,3.0,3.1,3.1,3.1,3.1,3.2,3.2,3.2,3.2,3.2,3.3,3.3,3.4,3.4,3.4,3.4,3.4,3.4,3.4,3.4,3.4,3.5,3.5,3.5,3.5,3.5,3.6,3.6,3.6,3.7,3.7,3.7,3.8,3.8,3.8,3.8,3.9,3.9,4.0,4.1,4.2,4.4]; 
var setosa = [0.2, 0.2, 0.2, 0.2, 0.2, 0.4, 0.3, 0.2, 0.2, 0.1, 0.2, 0.2, 0.1, 0.1, 0.2, 0.4, 0.4, 0.3, 0.3, 0.3, 0.2, 0.4, 0.2, 0.5, 0.2, 0.2, 0.4, 0.2, 0.2, 0.2, 0.2, 0.4, 0.1, 0.2, 0.2, 0.2, 0.2, 0.1, 0.2, 0.2, 0.3, 0.3, 0.2, 0.6, 0.4, 0.3, 0.2, 0.2, 0.2, 0.2]; 

    var new_setosa = setosa.map(function(x){ 
     return 0.75 * x + .25; 
    }); 

    var new_setosa_x = setosa_x.map(function(x){ 
     return x + .10; 
    }) 

    var other_chart = c3.generate({ 
    bindto: '#other_chart', 
    data: {   
     xs: { 
      setosa: 'setosa_x', 
      other: 'other_x' 

     }, 
     // iris data from R 
     columns: [      
      ["setosa_x"].concat(setosa_x), 
      ["setosa"].concat(setosa), 
      ["other_x"].concat(new_setosa_x), 
      ["other"].concat(new_setosa) 
      ],    
      types: { 
       setosa: 'scatter', 
       other : 'spline' 
      } 
    }  
});