Google Charts API wykres rozrzutu z legend i innych kolorach

Question

mam ten jeden przykład:

// Load the Visualization API and the piechart package. 
     google.load('visualization', '1.0', {'packages':['corechart']}); 

     // Set a callback to run when the Google Visualization API is loaded. 
     google.setOnLoadCallback(drawChart1); 

     // Callback that creates and populates a data table, 
     // instantiates the pie chart, passes in the data and 
     // draws it. 
     function drawChart1() { 
      var data = new google.visualization.DataTable(
      { 
       cols: [ 
        {id: 'A', label: 'A', type: 'number'}, 
        {id: 'B', label: 'B', type: 'number'}, 
        {id: 'C', label: 'C', type:'tooltip', p:{role:'tooltip'}} 
       ], 
       rows: [ 
        {c:[{v: 2}, {v: 3}, {v:'Allen'}]}, 
        {c:[{v: 4}, {v: 2}, {v:'Tom'}]}, 
        {c:[{v: 1}, {v: 3}, {v:'Sim'}]} 

       ] 
      }) 

      var options = { 
       title: 'Age vs. Weight comparison', 
       hAxis: {title: 'Age', minValue: 1, maxValue: 5}, 
       vAxis: {title: 'Weight', minValue: 1, maxValue: 5}, 
       legend: '' 
      }; 

      var chart = new google.visualization.ScatterChart(document.getElementById('chart_scatter_container')); 
      chart.draw(data, options); 
     } 

http://jsfiddle.net/eAWcC/1/

kiedy unoszą się po danych, etykietka zobaczy mnie etykieta dla tych danych. To jest dobre.

Ale chcę, aby wszystkie wartości były innego koloru i umieszczone w legendzie.

Jak to zrobić?

Answer 1

Kolumny w datatable na scatterchart są tymi, które są pokazane w legendzie i mają różne kolory. Aby wyświetlić je osobno, musisz zmienić układ danych tak, aby każda osoba miała własną kolumnę.

Na przykład zastąpić zmienną tabeli danych z tego:

  var data = google.visualization.arrayToDataTable([ 
       ['x', 'Allen', 'Tom', 'Sim'], 
       [1, null, null, 3], 
       [2, 3, null, null], 
       [4, null, 2, null], 
      ]); 

Rozwiązanie to daje pożądany wynik (wierzę, sprawdź here).

Jednak problem z tą metodą polega na tym, że kończy się wiele wartości "null" w każdej serii (ponieważ masz tylko pojedyncze punkty). Aby uprościć ten proces, możesz napisać pętlę, aby przejrzeć dane i sformatować je odpowiednio do nowej tabeli. Kod podstawowy byłoby:

1. Dodaj kolumnę dla wartości X do nowej tabeli
2. Dla każdego wiersza w kolumnie 2 (podpowiedzi) utworzyć nową kolumnę w nowej tabeli
3. Dla każdego wiersza w kolumna 1 (wartości Y) wypełnić ukośnie w dół/prawo

to będzie wyglądać mniej więcej tak:

  var newTable = new google.visualization.DataTable(); 

      newTable.addColumn('number', 'Age'); 
      for (var i = 0; i < data.getNumberOfRows(); ++i) { 
      newTable.addColumn('string', data.getValue(i, 2)); 
      newTable.addRow(); 
      } 

      for (var j = 0; j < data.getNumberOfRows(); ++j) { 
      newTable.setValue(j, j + 1, data.getValue(j, j + 1)); 
      } 

(Above CO de został przetestowany, ale nie lubi drugiej pętli for() z przyczyn wykraczających poza moją wiedzę).