js圖表非均勻x值

是否有一個支持多個曲線的JS圖表庫，具有不相等的步驟？考慮數據這樣的：js圖表非均勻x值

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]

這應導致2條曲線與來自1..20 X系列。第一個只有3個數據點應該由一條線連接。第二個在相同的x值範圍內有6個點。

哪個JS圖表庫可以處理？

來源

2017-04-19 RED SOFT ADAIR

最有可能的，任何圖表LIB可以處理，只需要加載的數據格式圖表接受

這裏，谷歌的圖表被用來繪製圖表

谷歌的圖表有一個方法到join表

所以，只需創建兩個數據表，一個用於每個x範圍

所得連接表將在缺失值填充null

因爲如此，需要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>

來源

2017-04-19 19:41:34 WhiteHat

這個問題的任何運氣.. 。？ – WhiteHat

js圖表非均勻x值

回答

相關問題