0

次の関数を使用して、新しいデータをロードするグラフがあります。

function insertGraph(yAxis, xAxis, Header) {
    setTimeout(function () {
        chart.load ({
            bindto: "#graph",
            xs: {
                'y':'x'
            },
            columns: [
                yAxis, 
                xAxis
            ]
        });
    }, 100);
}

渡される yAxis、xAxis、および Header の値の例は次のようになります。

y軸:

["y", 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14]

x軸:

["x", 0, 131.35, 26971.3, 27044.75, 27351.4, 27404.483333333334, 27419.416666666668, 33128.96666666667, 33549.13333333333, 34049.48333333333, 77464.26666666666, 77609.71666666666, 174171.85, 259166.98333333334]

ヘッダ：

MakeModeChange

チャートがロードされるとデータ名「y」が付けられることを除いて、すべてがうまく機能しHeaderます。データ名として（この場合は MakeModeChange）が必要です。以下のコードのように使用してみnameましたが、何も起こりませんでした:

function insertGraph(yAxis, xAxis, Header) {
    setTimeout(function () {
        console.log(Header);
        console.log(yAxis);
        chart.load ({
            bindto: "#graph",
            xs: {
                'y':'x'
            },
            columns: [
                yAxis, 
                xAxis
            ],
            names: {
                y: 'Header'
            }   
        });
    }, 100);
}

また、渡したものを次yAxisのように変更してみました。

["MakeModeChange", 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14]

次に、load 関数を次のように変更します。

function insertGraph(yAxis, xAxis, Header) {
    setTimeout(function () {
        chart.load ({
            bindto: "#graph",
            xs: {
                Header:'x'
            },
            columns: [
                yAxis, 
                xAxis
            ], 
        });
    }, 100);
}

しかし、次のエラーが表示されます。

Uncaught Error: x is not defined for id = "MakeModeChange".

これを機能させる方法はありますか？

4

1 に答える 1

1

x 軸と y 軸の変数/配列の向きが間違っていますか? x 軸の値が1, 2, 3, 4, etcで、y 軸の値が0, 131.35, etc.

いずれにせよ、配列のy値は系列名になり、xsオブジェクトを使用して x 値の配列を指定します。この x 値配列の名前は関係ありません。

以下のコード スニペットを参照/実行します。

function createGraph(xAxis, yAxis, Header) {

  // create the xs object with a key name of the header variable
  var myxs = {};
  myxs[Header] = 'x';
  
  // set the 1st position value in the yaxis to the header
  yAxis[0] = Header;
  
  c3.generate({
    data: {
      xs: myxs,
      columns: [
        xAxis,
        yAxis

      ]
    }
  });
}

createGraph(
  ["x", 0, 131.35, 26971.3, 27044.75, 27351.4, 27404.483333333334, 27419.416666666668, 33128.96666666667, 33549.13333333333, 34049.48333333333, 77464.26666666666, 77609.71666666666, 174171.85, 259166.98333333334],
  ["y", 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14],
  "Variable Name"
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id='chart' />

于 2015-05-27T18:59:38.220 に答える