谷歌AreaChart不同顏色

Question

我有圖這樣

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

function drawChart() { 
    // Define the chart to be drawn. 
    var data = new google.visualization.DataTable(); 
    data.addColumn('string', 'Data'); 
    data.addColumn('number', 'A'); 
    data.addColumn('number', 'A'); 
    data.addColumn('number', 'A'); 
    data.addColumn('number', 'A'); 
    data.addRows([ 
     [ 
      '01.06', 
      null, 
      0, 
      null, 
      null 
     ], 
     [ 
      '01.07', 
      null, 
      49, 
      null, 
      null 
     ], 
     [ 
      '01.08', 
      null, 
      14, 
      null, 
      null 
     ], 
     [ 
      '01.09', 
      null, 
      13, 
      null, 
      null 
     ], 
     [ 
      '01.10', 
      10, 
      null, 
      null, 
      null 
     ], 
     [ 
      '01.11', 
      null, 
      28, 
      null, 
      null 
     ], 
     [ 
      '01.12', 
      null, 
      24, 
      null, 
      null 
     ], 
     [ 
      '01.13', 
      null, 
      22, 
      null, 
      null 
     ], 
     [ 
      '01.14', 
      null, 
      19, 
      null, 
      null 
     ], 
     [ 
      '01.15', 
      null, 
      17, 
      null, 
      null 
     ], 
     [ 
      '01.16', 
      null, 
      15, 
      null, 
      null 
     ], 
     [ 
      '01.17', 
      10, 
      null, 
      null, 
      null 
     ], 
     [ 
      '01.18', 
      null, 
      33, 
      null, 
      null 
     ], 
     [ 
      '01.19', 
      null, 
      29, 
      null, 
      null 
     ], 
     [ 
      '01.20', 
      null, 
      null, 
      null, 
      37 
     ], 
    ]); 

    var options = { 
     legend: 'none', 
     pointSize: 5, 
     series: { 
      0: { 
       color: '#058DC7' 
      }, 
      1: { 
       color: 'red' 
      }, 
      2: { 
       color: 'green' 
      }, 
      3: { 
       color: 'orange' 
      } 
     } 
    }; 

    // Instantiate and draw the chart. 
    var chart = new google.visualization.AreaChart(document.getElementById('myPieChart')); 
    chart.draw(data, options); 
} 

https://jsfiddle.net/bvtzm2td/2/

，我需要這樣的

的圖表，我試圖這樣做

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

function drawChart() { 
    // Define the chart to be drawn. 
    var data = new google.visualization.DataTable(); 
    data.addColumn('string', 'Data'); 
    data.addColumn('number', 'A'); 
    data.addColumn('number', 'A'); 
    data.addColumn('number', 'A'); 
    data.addColumn('number', 'A'); 
    data.addRows([ 
     [ 
      '01.06', 
      0, 
      0, 
      null, 
      null 
     ], 
     [ 
      '01.07', 
      null, 
      49, 
      null, 
      null 
     ], 
     [ 
      '01.08', 
      null, 
      14, 
      null, 
      null 
     ], 
     [ 
      '01.09', 
      null, 
      13, 
      null, 
      null 
     ], 
     [ 
      '01.10', 
      10, 
      10, 
      null, 
      null 
     ], 
     [ 
      '01.11', 
      28, 
      28, 
      null, 
      null 
     ], 
     [ 
      '01.12', 
      null, 
      24, 
      null, 
      null 
     ], 
     [ 
      '01.13', 
      null, 
      22, 
      null, 
      null 
     ], 
     [ 
      '01.14', 
      null, 
      19, 
      null, 
      null 
     ], 
     [ 
      '01.15', 
      null, 
      17, 
      null, 
      null 
     ], 
     [ 
      '01.16', 
      null, 
      15, 
      null, 
      null 
     ], 
     [ 
      '01.17', 
      10, 
      10, 
      null, 
      null 
     ], 
     [ 
      '01.18', 
      33, 
      33, 
      null, 
      null 
     ], 
     [ 
      '01.19', 
      null, 
      29, 
      null, 
      null 
     ], 
     [ 
      '01.20', 
      null, 
      37, 
      null, 
      37 
     ], 
    ]); 

    var options = { 
     legend: 'none', 
     pointSize: 5, 
     series: { 
      0: { 
       color: '#058DC7' 
      }, 
      1: { 
       color: 'red' 
      }, 
      2: { 
       color: 'green' 
      }, 
      3: { 
       color: 'orange' 
      } 
     } 
    }; 

    // Instantiate and draw the chart. 
    var chart = new google.visualization.AreaChart(document.getElementById('myPieChart')); 
    chart.draw(data, options); 
} 

https://jsfiddle.net/bvtzm2td/3/

但它的作品不好，看起來像這樣 的問題是谷歌API自動連接01.10和01.11之間和和之間01.17 01.18紅點，但它是不需要。

任何幫助將不勝感激

Answer 1

在你的榜樣，你創建一個擁有多個系列，每個系列都有不同的顏色的圖表。當有多個系列時，只有同一系列中的相鄰點將與一條線連接。

從你想要的結果的描述中，我會建議創建一個單一系列的圖表，每個點具有不同的顏色。

<head> 
 
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
 
<script type="text/javascript"> 
 
    google.charts.load('current', { 
 
     packages: ['corechart'] 
 
    }); 
 
    google.charts.setOnLoadCallback(drawChart); 
 

 
    function drawChart() { 
 
     // Define the chart to be drawn. 
 
     var data = new google.visualization.DataTable(); 
 
     data.addColumn('string', 'Data'); 
 
     data.addColumn('number', 'A'); 
 
     data.addColumn({type: 'string', role: 'style'}); 
 
     data.addRows([ 
 
      [ 
 
       '01.06', 
 
       0, 
 
       'color: red' 
 
      ], 
 
      [ 
 
       '01.07', 
 
       49, 
 
       'color: red' 
 
      ], 
 
      [ 
 
       '01.08', 
 
       14, 
 
       'color: red' 
 
      ], 
 
      [ 
 
       '01.09', 
 
       13, 
 
       'color: red' 
 
      ], 
 
      [ 
 
       '01.10', 
 
       10, 
 
       'color: #058DC7' 
 
      ], 
 
      [ 
 
       '01.11', 
 
       28, 
 
       'color: red' 
 
      ], 
 
      [ 
 
       '01.12', 
 
       24, 
 
       'color: red' 
 
      ], 
 
      [ 
 
       '01.13', 
 
       22, 
 
       'color: red' 
 
      ], 
 
      [ 
 
       '01.14', 
 
       19, 
 
       'color: red' 
 
      ], 
 
      [ 
 
       '01.15', 
 
       17, 
 
       'color: #058DC7' 
 
      ], 
 
      [ 
 
       '01.16', 
 
       15, 
 
       'color: red' 
 
      ], 
 
      [ 
 
       '01.17', 
 
       10, 
 
       'color: red' 
 
      ], 
 
      [ 
 
       '01.18', 
 
       33, 
 
       'color: red' 
 
      ], 
 
      [ 
 
       '01.19', 
 
       29, 
 
       'color: red' 
 
      ], 
 
      [ 
 
       '01.20', 
 
       37, 
 
       'color: orange' 
 
      ], 
 
     ]); 
 

 
     var options = { 
 
      legend: 'none', 
 
      pointSize: 5, 
 
      series: { 
 
       0: { 
 
       }, 
 
      } 
 
     }; 
 

 
     // Instantiate and draw the chart. 
 
     var chart = new google.visualization.AreaChart(document.getElementById('myPieChart')); 
 
     chart.draw(data, options); 
 
    } 
 
    </script> 
 
</head> 
 
<body> 
 
<!-- Identify where the chart should be drawn. --> 
 
<div id="myPieChart"/> 
 
</body>

注意的一點顏色是什麼您最初要求略有不同點之前用於線/面。