Google Chartで不連続折れ線グラフを作成するには

Question

このような不連続折れ線グラフを作成したいと思います。

私はこのように書いたチャートを描画します。

function drawChart() { 
     var data = new google.visualization.DataTable(); 
     data.addColumn('date', 'Date'); 
     data.addColumn('number', 'Number'); 

     data.addRows([ 
     [new Date(2017, 1, 20), 460], 
     [new Date(2017, 1, 27), 579],   
     [new Date(2017, 1, 27), null], 
     [new Date(2017, 2, 1), 679], 
     [new Date(2017, 2, 6), 352] 
     ]); 

     var linearOptions = { 
     title: 'Discontinuous Line Chart' 
     }; 

     var linearChart = new google.visualization.LineChart(document.getElementById('linear_div')); 
     linearChart.draw(data, linearOptions); 
    } 

私はそれを分離するためにnull値のデータを入れていました。

これらのデータから上記のようなグラフを描く方法はありますか？

data.addRows([ 
     [new Date(2017, 1, 20), 460, true], 
     [new Date(2017, 1, 27), 579, false],   
     [new Date(2017, 2, 1), 679, true], 
     [new Date(2017, 2, 6), 352, true] 
     ]); 

これはjsfiddleのソースコードです。

https://jsfiddle.net/7jkmovqs/

Answer 1

あなたは

が作業スニペットを次のように表示ラインのギャップを作成するために'style'column role ...

使用stroke-opacity: 0.0;を使用することができます...ここ

、null結果デフォルトのスタイルで...

google.charts.load('current', { 
 
    callback: function() { 
 
    var data = new google.visualization.DataTable(); 
 
    data.addColumn('date', 'Date'); 
 
    data.addColumn('number', 'Number'); 
 
    data.addColumn({role: 'style', type: 'string'}); 
 

 
    data.addRows([ 
 
     [new Date(2017, 1, 20), 460, null], 
 
     [new Date(2017, 1, 27), 579, null], 
 
     [new Date(2017, 2, 1), 679, 'line {stroke-opacity: 0.0;}'], 
 
     [new Date(2017, 2, 6), 352, null] 
 
    ]); 
 

 
    var linearOptions = { 
 
     title: 'Discontinuous Line Chart' 
 
    }; 
 

 
    var linearChart = new google.visualization.LineChart(document.getElementById('linear_div')); 
 
    linearChart.draw(data, linearOptions); 
 
    }, 
 
    packages: ['corechart'] 
 
});

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

---

注：ブール値をとり'certainty'ためのコラムの役割がある...

data.addRows([ 
    [new Date(2017, 1, 20), 460, true], 
    [new Date(2017, 1, 27), 579, false], 
    [new Date(2017, 2, 1), 679, true], 
    [new Date(2017, 2, 6), 352, true] 
]); 

が、これはがを破線を行います...