jsチャート不均一なx値

Question

複数のカースをサポートするJS Chartingライブラリがありますか？不等なステップがありますか？ そのようなデータを考えてみましょう：

Curve 1 (x/y pairs) RED in Sample: 
[1, 10] [10, 20] [20,20] 
Curve 2 Green in Sample: 
[1, 2] [5, 6] [10,10] [11,12] [15,15] [20,20] 

これは1..20からのx RANGEと2つの曲線を生じるはずです。最初のデータポイントは3つのデータポイントがあり、1つのラインで接続する必要があります。 2番目の値は、同じx値の範囲にある6つのポイントを持ちます。

これを処理できるJS Chartingライブラリはどれですか？

Answer 1

任意のチャートlibには扱うことができ、ほとんどの場合、 ちょうどチャートはここ

を受け入れフォーマットでデータをロードする必要があり、Googleのチャートは、チャートに

Googleのチャートを描画するために使用されるメソッドを持っていますjoinテーブルよう

に、ちょうど2つのデータテーブルを作成し、各xの範囲について1つ

得られた結合テーブルは、と欠落値を入力しますこの質問となど

、そのライン

作業スニペット以下を参照してくださいには切れ目がないinterpolateNullsためのオプションを必要とする...

google.charts.load('current', { 
 
    callback: drawChart, 
 
    packages:['corechart'] 
 
}); 
 

 
function drawChart() { 
 
    var x0 = [ 
 
    [1, 10], [10, 20], [20,20] 
 
    ]; 
 
    var x1 = [ 
 
    [1, 2], [5, 6], [10,10], [11,12], [15,15], [20,20] 
 
    ]; 
 

 
    var data0 = google.visualization.arrayToDataTable(x0, true); 
 
    var data1 = google.visualization.arrayToDataTable(x1, true); 
 

 
    var joinData = google.visualization.data.join(
 
    data0, data1, 'full', [[0, 0]], [1], [1] 
 
); 
 

 
    var options = { 
 
    height: 400, 
 
    interpolateNulls: true, 
 
    legend: { 
 
     position: 'none' 
 
    }, 
 
    vAxis: { 
 
     viewWindow: { 
 
     max: 30 
 
     } 
 
    }, 
 
    hAxis: { 
 
     viewWindow: { 
 
     max: 30 
 
     } 
 
    } 
 
    }; 
 

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

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="chart_div"></div>