0

「その場で」グラフのタイプを変更できるように、DataTable に基づいて Google (折れ線) グラフを実装しています。https://developers.google.com/chart/interactive/docs/reference#dataparamに基づいて（スクリプトによって生成された）データテーブルを正常に生成しました

HTMLページに実装されています（テスト目的でページは空であるため、他のスクリプト/コンテンツとの干渉はありません）

Y 軸、Legenda、および線は正しく生成されていますが、x 軸が欠落しているように見えます。

データ テーブルに次のコンテンツを使用しています。 

{"cols":[{"id":"timestamp","label":"timestamp","pattern":"","type":"string"},{"id":"sy","label":"sy","pattern":"","type":"number"},{"id":"us","label":"us","pattern":"","type":"number"},{"id":"average_cpu","label":"average_cpu","pattern":"","type":"number"}],"rows":[{"c":[{"v":"1372249356","f":""},{"v":0,"f":""},{"v":4,"f":""},{"v":43,"f":""}]},{"c":[{"v":"1372249650","f":""},{"v":13,"f":""},{"v":46,"f":""},{"v":49,"f":""}]},{"c":[{"v":"1372249950","f":""},{"v":4,"f":""},{"v":45,"f":""},{"v":47,"f":""}]},{"c":[{"v":"1372250250","f":""},{"v":2,"f":""},{"v":19,"f":""},{"v":46,"f":""}]},{"c":[{"v":"1372250550","f":""},{"v":3,"f":""},{"v":46,"f":""},{"v":51,"f":""}]}]}

これはすべて、次のJavascriptにまとめられています

<html>
<head>
    <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
        // Load the Visualization API and the piechart package.
        google.load('visualization', '1', {'packages':['corechart']});
    </script>
            <script type="text/javascript">
    google.setOnLoadCallback(draw_15a6f1d2a7556b357de0d315596aa96c);
    function draw_15a6f1d2a7556b357de0d315596aa96c() {
      var data = new google.visualization.DataTable({"cols":[{"id":"timestamp","label":"timestamp","pattern":"","type":"string"},{"id":"sy","label":"sy","pattern":"","type":"number"},{"id":"us","label":"us","pattern":"","type":"number"},{"id":"average_cpu","label":"average_cpu","pattern":"","type":"number"}],"rows":[{"c":[{"v":"1372249356","f":""},{"v":0,"f":""},{"v":4,"f":""},{"v":43,"f":""}]},{"c":[{"v":"1372249650","f":""},{"v":13,"f":""},{"v":46,"f":""},{"v":49,"f":""}]},{"c":[{"v":"1372249950","f":""},{"v":4,"f":""},{"v":45,"f":""},{"v":47,"f":""}]},{"c":[{"v":"1372250250","f":""},{"v":2,"f":""},{"v":19,"f":""},{"v":46,"f":""}]},{"c":[{"v":"1372250550","f":""},{"v":3,"f":""},{"v":46,"f":""},{"v":51,"f":""}]}]});
      var chart = new google.visualization.LineChart(document.getElementById('draw_15a6f1d2a7556b357de0d315596aa96c'));
      chart.draw(data, {width: 800, height: 600});
    }
    </script>    
</head>
<body>
    <div id="draw_15a6f1d2a7556b357de0d315596aa96c"></div>
</body>
</html>

しかし、X 軸が表示されない理由がわかりません。DataTable Roles を調べましたが、X 軸を表示するための参照が見つかりませんでし たhttps://developers.google.com/chart/interactive/docs/roles?hl=ja#jsonliteral引数を指定する必要があります。

jsfiddle.net/WuLWF/ (Fiddle 標準に従ってバラバラに分割すると機能しませんでした)

または、おそらく私の DataTable が間違って生成されています。

正しい方向に私を導いてください、どうもありがとう

4

1 に答える 1

0

x 軸は表示されていますが、ラベルは表示されていません。最初の列は文字列型であるため、どのような場合でもグリッド線は表示されませんが、各行の最初の列の「f」プロパティは空の文字列です。つまり、軸ラベルに空の文字列として表示されます、そのとおりです。

ツールチップにこれらの同じ値が表示されないように、これを行ったに違いありません。カスタム ツールチップを調べて、ツールチップに必要なものを表示することをお勧めします。

最初の列に文字列の代わりに数値を使用した場合、軸ラベルは、軸の書式オプションを使用して生成され、数値として表示され、値はたまたま最初の列と同じ値に近くなる可能性があります。個別の文字列値はそのまま使用されます。

または、date、datetime、または timeofday のタイプを使用することをお勧めします。これらも離散的ではなく、数値のように連続として扱われるため、目盛りラベルのフォーマットは軸フォーマット オプションによって決まります。それが役立つことを願っています。

于 2013-06-30T21:43:13.093 に答える