Google Charts - ScatterChart Tick Marks and Styling

Question

Я создал ScatterChart для визуализации связей между различными полями данных. Визуализированные данные могут быть числовыми или номинальными/порядковыми по своей природе. Таким образом, номинальные/порядковые значения отображаются на числовые значения. Простым примером может быть «Возраст + Пол», где пол является номинальным, и я сопоставляю «male» => 1, «female» => 2, чтобы получить желаемый результат.

До сих пор так хорошо, график работает, но мне нужна помощь форматирования.

Как вы видите, первый гендерный столбец отображается на оси y, а второй - в правой части графика. Я бы хотел, чтобы они были «хорошенькими», как в некотором пространстве к оси у, некоторое пространство до правого конца.

Также я хотел бы отобразить соответствующие метки для «мужских» и «женских» по оси y.

РАСШИРЕНИЕ:

Я также хочу, чтобы разделить данные на различные серии, чтобы иметь возможность раскрасить, например, «мужские» и «женские» точки данных в разных цветах.

Что я делаю, это сборка 3 столбцов в моей таблице данных (возраст, мужчина, женщина), но я не могу получить ее правильно. В настоящее время все это объединяется в одну отображаемую колонку.

Вот мой код до сих пор:

var drawMe = function(){ 
     var columns = 0; 
     var xColumns = 0; 
     var yColumns = 0; 
     var gdata = new google.visualization.DataTable(); 
     /** 
     * data Object: 
     * data.xName = Name of x parameter 
     * data.yName = Name of y parameter 
     * data.x = data for x paramter 
     * data.y = data for y parameter 
     * data.xType = type of x parameter, either num (= number) or other (= string) 
     * data.yType = type of y parameter, either num (= number) or other (= string) 
     * data.xChoices = array of strings representing availble choices for x if xType !== num 
     * daty.yChoices = array of strings representing availble choices for y if yType !== num 
     * 
     */ 
     if(data.xType === 'num'){ 
      gdata.addColumn('number', data.xName); 
      xColumns++; 
      columns++; 
     } else { 
      for(var i = 0; i < data.xChoices.length; i++){ 
       gdata.addColumn('number', data.xChoices[i]); 
       xColumns++; 
       columns++; 
      } 
     } 
     if(data.yType === 'num'){ 
      gdata.addColumn('number', data.yName); 
      yColumns++; 
      columns++; 
     } else { 
      for(var i = 0; i < data.yChoices.length; i++){ 
       gdata.addColumn('number', data.yChoices[i]); 
       columns++; 
       yColumns++; 
      } 
     } 
     var x; 
     var y; 
     for(var i = 0; i < count; i++){ // count is set by closure, cause data is paged via ajax 
      // initialize zero row 
      var row = []; 
      for(var j = 0; j < columns; j++){ 
       row[j] = null; 
      } 
      if(data.xType === 'num'){ 
       x = parseFloat(data.x[i]); 
       row[0] = x; 
      } else { 
       var index = data.xChoices.indexOf(data.x[i]); 
       x = { 
        v: index + 1, // don't start at 0 
        f: data.xChoices[index], 
       }; 
       row[index] = x; 
      } 
      if(data.yType === 'num'){ 
       y = parseFloat(data.y[i]); 
       row[xColumns] = y; 
      } else { 
       var index = data.yChoices.indexOf(data.y[i]); 
       y = { 
        v: index + 1, // don't start at 0 
        f: data.yChoices[index], 
       }; 
       row[xColumns + index] = y; 
      } 
      gdata.addRow(row); 
     } 
     var xTitle = data.xName; 
     if(data.xUnit){ 
      xTitle += ' [' + data.xUnit + ']'; 
     } 
     var yTitle = data.yName; 
     if(data.yUnit){ 
      yTitle += ' [' + data.yUnit + ']'; 
     } 
     var xGridLines = -1; 
     var yGridLines = -1; 
     var xTicks = false; 
     var yTicks = false; 
     if(data.xType !== 'num' && data.xChoices){ 
      xGridLines = data.xChoices.length + 2; 
      xTicks = [{v: 0, f: ''}]; // empty tick at the beginning 
      for(var i = 0; i < data.xChoices.length; i++){ 
       xTicks.push({v: i+1, f: data.xChoices[i]}); 
      } 
      xTicks.push({v: 3, f: ''}); // empty tick at the end 
     } 
     if(data.yType !== 'num' && data.yChoices){ 
      yGridLines = data.yChoices.length + 2; 
      yTicks = [{v: 0, f: ''}]; 
      for(var i = 0; i < data.yChoices.length; i++){ 
       yTicks.push({v: i+1, f: data.yChoices[i]}); 
      } 
      yTicks.push({v: 3, f: ''}); 
     } 
     var options = { 
     title: data.xName + ' vs. ' + data.yName, 
     hAxis: { 
      title: xTitle, 
      gridlines: { 
       count: xGridLines 
      } 
     }, 
     vAxis: { 
      title: yTitle, 
      gridlines: { 
       count: yGridLines 
      } 
     } 
     }; 
     if(xTicks !== false){ 
      options.hAxis.ticks = xTicks; 
      options.hAxis.viewWindowMode = 'pretty'; 
     } 
     if(yTicks !== false){ 
      options.vAxis.ticks = yTicks; 
      options.vAxis.viewWindowMode = 'pretty'; 
     } 
     options.series = {}; 
     for(var i = 0; i < columns; i++){ 
      options.series[i] = {color: atk.COLORS[i], visibleInLegend: true}; 
     } 
     var chart = new google.visualization.ScatterChart(element); 
     chart.draw(gdata, options); 
    }; 

Спасибо за вашу помощь и время!

Answer 1

Вам повезло, есть обновление API, которое находится в RC версии (1.1), которое должно быть в состоянии сделать именно то, что вы хотите. Загрузите версию RC первая:

google.load('visualization', '1.1', {packages: ['corechart']}); 

Затем установите параметр hAxis.ticks так:

hAxis: { 
    ticks: [{v: 0, f: ''}, {v: 1, f: 'Male'}, {v: 2, f: 'Female'}, {v: 3, f: ''}] 
} 

Попробуйте это и посмотреть, если он работает.

Edit:

Для того, чтобы мужчины и женщины разного цвета, вам нужно разделить данные на две отдельные колонки. Вы можете выполнить это с помощью DataView:

// assumes Male/Female is column 0 and age is column 1 in your DataTable 
var view = new google.visualization.DataView(data); 
view.setColumns([0, { 
    type: 'number', 
    label: 'Age', 
    calc: function (dt, row) { 
     // return a value only if male 
     return (dt.getValue(row, 0) == 1) ? dt.getValue(row, 1) : null; 
    } 
}, { 
    type: 'number', 
    label: 'Age', 
    calc: function (dt, row) { 
     // return a value only if female 
     return (dt.getValue(row, 0) == 2) ? dt.getValue(row, 1) : null; 
    } 
}]); 

Нарисуйте диаграмму, используя DataView вместо DataTable.