無法在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' 
      } 
    }  
});