Question

请指导我做错了什么。我正在使用c3.js在我的网页上显示图表。现在我有需要在哪里我需要一起显示样条曲线和散点图。我在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中，并按时间顺序排序

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

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

2 个答案: