Question

我有一个散点图，所有点都是绘制的，平均点也是。我需要的是在散点图中绘制该平均点的x轴和y轴。可能吗？以下是我的代码段。

CODE：

function drawChart(paramObj)
    {
        if (paramObj == 'undefined') {
            alert('Something wrong with configuration');
            return false;
        }
        var data    = new google.visualization.DataTable();
        var addRows = new Array();
        var chart   = null;
        var headers = null;
        jQuery.each(paramObj.dataArray.split('\n'), function (index, value) {
            var tabs    = value.split('\t');

            if (tabs.length != 7) {
                return;
            }


            if (index != undefined && index == 0) {
                headers = tabs;
                data.addColumn('number', dfv(1, headers, ''));
                data.addColumn('number', dfv(2, headers, ''));

            } else {

                var name     = dfv(0, tabs, '');
                var xval     = parseFloat(parseFloat(dfv(1, tabs, '')).toFixed(2));
                var yval     = parseFloat(parseFloat(dfv(2, tabs, '')).toFixed(2));
                var xval_ori = parseFloat(parseFloat(dfv(3, tabs, '')).toFixed(2));
                var yval_ori = parseFloat(parseFloat(dfv(4, tabs, '')).toFixed(2));
                var opt1_val = dfv(5, tabs, '');
                var opt2_val = dfv(6, tabs, '');

                if (name == 'Average') {
                    var test = [
                        xval,yval,
                        name + '\n' +
                        dfv(3,headers,'') + ' = ' + xval_ori + ' ' +
                        dfv(4,headers,'') + ' = ' + yval_ori + '\n' +
                        ((opt1_val != ' ') ? dfv(5,headers,'') + ' = ' + opt1_val : '') + ' ' +
                        ((opt2_val != ' ') ? dfv(6,headers,'') + ' = ' + opt2_val : ''),
                        'point { size: 4; shape-type: circle; fill-color: red; }'
                    ];
                } else {
                    var test = [
                        xval,yval,
                        name + '\n' +
                        dfv(3,headers,'') + ' = ' + xval_ori + ' ' +
                        dfv(4,headers,'') + ' = ' + yval_ori + '\n' +
                        ((opt1_val != ' ') ? dfv(5,headers,'') + ' = ' + opt1_val : '') + ' ' +
                        ((opt2_val != ' ') ? dfv(6,headers,'') + ' = ' + opt2_val : ''),
                        null
                    ];
                }
                addRows.push(test);
            }
        });

        data.addColumn({type: 'string', role: 'tooltip'});
        data.addColumn({type: 'string', role: 'style'});
        data.addRows(addRows);

        var options = {
            title:     dov('title', paramObj, '(no title)'),
            hAxis:     {title: dov('xLabel', paramObj, '')},
            vAxis:     {title: dov('yLabel', paramObj, '')},
            legend:    dov('legend', paramObj, 'none'),
            width:     dov('width', paramObj, 1200),
            height:    dov('height', paramObj,  800),
            chartArea: {left:100,top:50,right:100,bottom:50}
        };

        switch (dov('graphType', paramObj, 'scatter')) {
            case 'scatter':
                chart = new google.visualization.ScatterChart(document.getElementById(dov('container_id', paramObj, 'container')));
                break;

            default:
                break;
        }

        if (chart) {
            chart.draw(data, options);
            return true;
        }
        return false;
    }

Answer 1

我确实找到了一种方法，可以通过谷歌分散图API本身在图API的选项数组中实现。

见下面的代码：

hAxis:     {title: 'title1', baseline:base_x, baselineColor:'red'}
vAxis:     {title: 'title2', baseline:base_y, baselineColor:'red'}

其中base_x和base_y是avg x和y坐标点。

希望这有助于将来的某个人，我们将获得如下图表：

Answer 2

从平均点到每个轴绘制线，
为平均系列添加单独的列

data.addColumn('number', 'AVG');

添加三行数据以从每个轴绘制线条，例如

var avgX = 50;
var avgY = 50;

data.addRows([
  [0, null, avgY],
  [avgX, null, avgY],
  [avgX, null, 0]
]);

请参阅以下工作代码段...

google.charts.load('current', {
  callback: drawChart,
  packages: ['corechart']
});

function drawChart(transparent) {
  var data = new google.visualization.DataTable();
  data.addColumn('number', 'X');
  data.addColumn('number', 'Y');

  for (var i = 0; i < 100; i++) {
    data.addRow([
      Math.floor(Math.random()*100),
      Math.floor(Math.random()*100)
    ]);
  }

  // add average point
  data.addColumn('number', 'AVG');

  var avgX = 50;
  var avgY = 50;
  data.addRows([
    [0, null, avgY],
    [avgX, null, avgY],
    [avgX, null, 0]
  ]);

  var options = {
    series: {
      // change average series to line
      1: {
        lineWidth: 2,
        pointSize: 0
      }
    },
    legend: {
      position: 'bottom',
      textStyle: {
        bold: true,
        fontSize: 20
      }
    }
  };

  var chartDiv = document.getElementById('chart_div');
  var chart = new google.visualization.ScatterChart(chartDiv);
  chart.draw(data, options);
}

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

是否可以将x轴和y轴绘制为google散点图中平均点的线

2 个答案: