さまざまなデータポイントを持つGoogleラインチャート

私はGoogleラインチャートを描こうとしていますが、それぞれのラインのデータポイント数は異なる場合があります。つまり、x軸に10個の値がある場合、一部の行には4または5などのデータしかないことがあります。さまざまなデータポイントを持つGoogleラインチャート

How to create Google Chart with lines (series) of different lengths?

これが私のために動作しませんでした：私はここにこの質問への答えが見つかりました。私はアンダースコアと二重アンダースコアの両方を試しました。また、私はアンダースコア（S）を中心に 'を加える」としてみました。しかし、私は、HTMLを開くと、サイトは無地のままここに私のコードは次のとおりです。。

<html> 
    <head> 
    <script type="text/javascript" src="https://www.google.com/jsapi"></script> 
    <script type="text/javascript"> 
     google.load("visualization", "1", {packages:["corechart"]}); 
     google.setOnLoadCallback(drawChart); 
     function drawChart() { 
     var data = new google.visualization.DataTable(); 
     data.addColumn('string', 'point'); 
     data.addColumn('number', 'line1'); 
     data.addColumn('number', 'line2'); 
     data.addColumn('number', 'line3'); 
     data.addColumn('number', 'line4'); 
     data.addColumn('number', 'line5'); 
     data.addRows([ 
      ['0', 5, 6, 10, 8,_], 
      ['1', 5, 6, 10, 8, 10]]); 
     var options = { 
      title: 'Test' 
     }; 

     var chart = new google.visualization.LineChart(document.getElementById('chart_div')); 
     chart.draw(data, options); 
     } 
    </script> 
    </head> 
    <body> 
    <div id="chart_div" style="width: 900px; height: 500px;"></div> 
    </body> 
</html>

誰もが解決策を知っている

出典

2012-02-28 x squared

と思います？その答えはこのページにありますData Formats
JSはそれが変数だと思うので、データの配列の_は使用できません_ _は欠損値のエンコードされた値ですので変換する必要がありますすべてのデータをエンコードされた文字列に変換して欠損値を取得します_ リンク先ページの最後に、このエンコードを実現する関数があるようです。

"インライン"メソッドではなく、このようにデータを設定できるので、エンコードされた値を使用する必要はありません。

<html> 
<head> 
<script type="text/javascript" src="https://www.google.com/jsapi"></script> 
<script type="text/javascript"> 
    google.load("visualization", "1", {packages:["corechart"]}); 
    google.setOnLoadCallback(drawChart); 
    function drawChart() { 
    var data = new google.visualization.DataTable(); 
    data.addColumn('string', 'point'); 
    data.addColumn('number', 'line1'); 
    data.addColumn('number', 'line2'); 
    data.addColumn('number', 'line3'); 
    data.addColumn('number', 'line4'); 
    data.addColumn('number', 'line5'); 

    data.addRows(3); 
    data.setValue(0, 0, '2004'); 
    data.setValue(0, 1, 1000); 
    data.setValue(0, 2, 400); 
    data.setValue(0, 3, 500); 
    data.setValue(1, 0, '2005'); 
    data.setValue(1, 1, 1000); 
    data.setValue(1, 2, 400); 
    data.setValue(1, 3, 500); 
    data.setValue(2, 0, '2006'); 
    data.setValue(2, 1, 1000); 
    data.setValue(2, 2, 400); 


    var options = { 
     title: 'Test' 
    }; 

    var chart = new google.visualization.LineChart(document.getElementById('chart_div')); 
    chart.draw(data, options); 
    } 
</script> 
</head> 
<body> 
<div id="chart_div" style="width: 900px; height: 500px;"></div> 
</body> 
</html>

出典

2012-02-28 11:46:23 florian

ご返信ありがとうございます。 :) –

さまざまなデータポイントを持つGoogleラインチャート

答えて

関連する問題