2012-04-27 23 views
0

Googleの新しいChartsを使用するとデータのグラフィック表現を作成する素晴らしい方法ですが、Excelでできることはいくつかあります。 APIを使用して複製する方法を見つけることができます。Googleの動力線グラフのX軸にポイントとラベルを配置

私がやりたいことは、x軸上の最初の点にプロットされた点をy軸に近づけることです。現在、最初のポイントはy軸から離れてプロットされていますが、生成しているグラフでは、最初のポイントはデータの起点でなければなりません。ここで私は、現在持っているものです。

current Google Charts output

0,40でプロット点が離れ、y軸からプロットされています。私が望むのは、真の0,0点を持つことで、 '1'のプロットされたデータは最初の日の終わりに撮影され、 '0'で撮影されたデータはちょうどベースラインです。

いくつかのヒント012があり

<div id="chart_div" style="width: 900px; height: 500px;"></div> 

google.load("visualization", "1", {packages:["corechart"]}); 
google.setOnLoadCallback(drawChart); 
function drawChart() { 
    var data = new google.visualization.DataTable(); 
    data.addColumn('string', 'Day'); 
    data.addColumn('number', 'Slide'); 
    data.addRows([ 
     ['0', 40], 
     ['1', 36], 
     ['2', 32], 
     ['3', 28], 
     ['4', 24], 
     ['5', 20], 
     ['6', 16], 
     ['7', 12], 
     ['8',8], 
     ['9', 4], 
     ['10', 0], 
    ]); 

    var options = { 
     colors: ['red', 'silver'], 
     title: 'Slide', 
     hAxis: {minValue: 0} 
    }; 

    var chart = new google.visualization.LineChart(document.getElementById('chart_div')); 
    chart.draw(data, options); 
} 
​ 

とHTML:

ideal Google Charts output

あなたも一緒にプレイするために、私はjsfiddleを作成しましたが、ここでのJavaScriptのです軸のカスタマイズについてはですが、グラフを破るだけです。

答えて

0

グラフを使用する場合、x軸を文字列として定義すると、グラフの先頭と最後の両方に隙間ができます。これは、問題の画像のように、y軸のラベルとプロットされた最初の点の間で最も顕著です。

上、この来る数(明らかに、適切な)としてx軸を定義する:最初の列はタイプnumberで今であり、値は現在の数字ではなく文字列で

data.addColumn('number', 'Day'); 
data.addColumn('number', 'Slide'); 
data.addRows([ 
    [0, 40], 
    [1, 36], 
    [2, 32], 
    [3, 28], 
    [4, 24], 
    [5, 20], 
    [6, 16], 
    [7, 12], 
    [8,8], 
    [9, 4], 
    [10, 0], 
]); 

jsfiddleで作業してください。