2016-12-16 3 views
1

serieschartSharpは、Googleの散布図では機能しますか?私は<a href="https://developers.google.com/chart/interactive/docs/gallery/scatterchart" rel="nofollow noreferrer">scatter chart from the Google visualization plugin</a>を使用しています、と私はしようとしています

  • は各ポイントをお持ちの異なる色
  • なる各点が異なる形状とすることがあります。

私はここで、この一般的な推奨事項を参照して、この試みた:

google.charts.load('current', { 'packages': ['corechart'] }); 
google.charts.setOnLoadCallback(drawChart); 
function drawChart() { 
    var data = google.visualization.arrayToDataTable([ 
     ['Age', 'Weight'], 
     [8, 12], 
     [4, 5.5], 
     [11, 14], 
     [4, 5], 
     [3, 3.5], 
     [6.5, 7] 
    ]); 

    var options = { 
     series: { 
      0: { pointShape: 'circle' }, 
      1: { pointShape: 'triangle' }, 
      2: { pointShape: 'square' }, 
      3: { pointShape: 'diamond' }, 
      4: { pointShape: 'star' }, 
      5: { pointShape: 'polygon' } 
     }, 
     pointSize: 28, 
     chartArea:{left:10,top:0,width:"96%",height:"92%"}, 
     'backgroundColor': 'transparent', 
     hAxis: { 
      baselineColor: 'transparent', 
      gridlineColor: 'transparent', 
      textPosition: 'none', minValue: 0, maxValue: 15 
     }, 
     vAxis: { 
      baselineColor: 'transparent', 
      gridlineColor: 'transparent', 
      textPosition: 'none', minValue: 0, maxValue: 15 
     }, 
     gridlines: { 
      color: 'transparent' 
     }, 
     legend: 'none' 
    }; 

をしかし、散布図の上に動作するようには思えません。

散布図は、各点で異なる色や形を持つ機能をサポートしていますか?

答えて

1

各シリーズは、列に割り当てられている:データ
などで

series.0 =データの列1
series.1 =カラム2 ...設けdataので

は一を有しますY軸列の場合、すべての点がseries.0 - >pointShape: 'circle'になります。

を各列に追加し、各点を の形に変更します。 ...作業スニペットは、以下を参照してください

google.charts.load('current', { 'packages': ['corechart'] }); 
 
google.charts.setOnLoadCallback(drawChart); 
 
function drawChart() { 
 
    var data = google.visualization.arrayToDataTable([ 
 
     ['Age', 'Weight', 'Weight', 'Weight', 'Weight', 'Weight', 'Weight'], 
 
     [8, 12, null, null, null, null, null], 
 
     [4, null, 5.5, null, null, null, null], 
 
     [11, null, null, 14, null, null, null], 
 
     [4, null, null, null, 5, null, null], 
 
     [3, null, null, null, null, 3.5, null], 
 
     [6.5, null, null, null, null, null, 7] 
 
    ]); 
 

 
    var options = { 
 
     series: { 
 
      0: { pointShape: 'circle' }, 
 
      1: { pointShape: 'triangle' }, 
 
      2: { pointShape: 'square' }, 
 
      3: { pointShape: 'diamond' }, 
 
      4: { pointShape: 'star' }, 
 
      5: { pointShape: 'polygon' } 
 
     }, 
 
     pointSize: 28, 
 
     chartArea:{left:10,top:0,width:"96%",height:"92%"}, 
 
     'backgroundColor': 'transparent', 
 
     hAxis: { 
 
      baselineColor: 'transparent', 
 
      gridlineColor: 'transparent', 
 
      textPosition: 'none', minValue: 0, maxValue: 15 
 
     }, 
 
     vAxis: { 
 
      baselineColor: 'transparent', 
 
      gridlineColor: 'transparent', 
 
      textPosition: 'none', minValue: 0, maxValue: 15 
 
     }, 
 
     gridlines: { 
 
      color: 'transparent' 
 
     }, 
 
     legend: 'none' 
 
    }; 
 

 
    var chart = new google.visualization.ScatterChart(document.getElementById('chart_div')); 
 
    chart.draw(data, options); 
 
}
<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="chart_div"></div>

関連する問題

 関連する問題