0

私が間違っていることを教えてください。ウェブページにグラフを表示するために 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>

ありがとう

4

2 に答える 2

2

私も疑問に思いました。

  • 折れ線グラフを散布図と同じ x 軸にプロットするには、x 軸が必要で、散布図と同じ軸に設定します。setosa_x データは順番通りである必要はありませんが、共有された x 軸上で便利な折れ線グラフを作成できるようにする必要があります。これは、setosa の定義方法にも影響します。
  • x 軸には同じ数値がいくつかあるため、線データにいくつかの null を指定する必要があります。
  • 散布図と折れ線グラフに異なる軸 (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
        }      
    }                 
});
于 2014-11-26T13:06:14.613 に答える
0

上記の答えは私にとって有益な出発点でしたが、最終的には的外れです。C3 システムでは、複数の y 軸を作成する必要なく、複数のチャート タイプを指定できます。この方法で推論を操作するのは簡単すぎるため、ほとんどの場合は避ける必要があります (1 つの軸を切り捨てて、変動性の外観を高めるか、その逆）。

typesプロットする各シリーズの x 値と y 値をそれぞれ追加し、データ オブジェクトの引数でプロットする必要があるグラフのタイプを参照するだけです。下記参照：

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'
            }
    }    
});
于 2016-05-04T21:02:43.517 に答える