在 Google 图表（象限图）上书写文本

Question

我想用 Google 图表 API 创建一个象限图，但我无法将文本插入到我创建的 4 个相应象限中。我现在的代码如下

function drawScatterManager() {

    var data = google.visualization.arrayToDataTable([
        ['Actual', 'Communication', 'Leading', 'Managing Relationships', 'Controlling', 'Planning', 'Problem Solving', 'Managing Self'],
        [1, 2, null, null, null, null, null, null],
        [2, null, 2, null, null, null, null, null],
        [2, null, null, 4, null, null, null, null],
        [1, null, null, null, 5, null, null, null],
        [4, null, null, null, null, 2, null, null],
        [5, null, null, null, null, null, 1, null],
        [4, null, null, null, null, null, null, 4]

    ]);

    var options = {
        title: 'Self vs. Manager comparison (N = 1)',
        hAxis: { title: 'Self', minValue: 0, maxValue: 5 },
        vAxis: { title: 'Manager', minValue: 0, maxValue: 5 },
        colors: ['#4f81bd', '#318687', "#c0514d", '#f79646', '#76933c', "#4bacc6", "#8064a0"],

    };

    var chart = new google.visualization.ScatterChart(document.getElementById('chart_div1'));

    chart.draw(data, options);
    drawVAxisLine(chart, 3.5);
    drawXAxisLine(chart, 3.5);
}

drawVAxis 和 drawXAxis 绘制一条水平和垂直线，将四个象限分开。图表看起来像图片 here, but I want it to look like this here。感谢任何帮助。

Answer 1

您可以使用 annotation column role 来绘制象限标签。

在数据末尾添加两列table。
第一个将用于标签的 y 轴放置。
第二个是标签本身。

注意：您可以使用组合图表来绘制垂直线和水平线。
但如果您选择手动绘制它们，
请务必等待图表的 'ready' 事件，
否则在调用 draw-AxisLine 函数时图表可能不可用...

我们将使用以下选项来防止线条和注释系列响应用户...

series: {
  7: {
    color: '#333333',
    enableInteractivity: false,
    type: 'line'
  },
  8: {
    color: '#333333',
    enableInteractivity: false,
    type: 'line'
  },
  9: {
    annotations: {
      stem: {
        length: 0
      },
      textStyle: {
        color: 'black'
      }
    },
    color: 'transparent',
    enableInteractivity: false
  }
}

请参阅以下工作片段...

google.charts.load('current', {
  packages: ['corechart']
}).then(function() {
  var data = google.visualization.arrayToDataTable([
    ['Actual', 'Communication', 'Leading', 'Managing Relationships', 'Controlling', 'Planning', 'Problem Solving', 'Managing Self', 'horizontal line', 'vertical line', 'label placement', {type: 'string', role: 'annotation'}],
    [0, null, null, null, null, null, null, null, 3.5, null, null, null],
    [1, 2, null, null, null, null, null, null, 3.5, null, null, null],
    [1.5, null, null, null, null, null, null, null, null, null, 1.5, 'Quadrant 2'],
    [1.5, null, null, null, null, null, null, null, null, null, 4.5, 'Quadrant 1'],
    [2, null, 2, null, null, null, null, null, 3.5, null, null, null],
    [2, null, null, 4, null, null, null, null, 3.5, null, null, null],
    [1, null, null, null, 5, null, null, null, 3.5, null, null, null],
    [4, null, null, null, null, 2, null, null, 3.5, null, null, null],
    [5, null, null, null, null, null, 1, null, 3.5, null, null, null],
    [4, null, null, null, null, null, null, 4, null, null, null, null],
    [4.5, null, null, null, null, null, null, null, null, null, 1.5, 'Quadrant 4'],
    [4.5, null, null, null, null, null, null, null, null, null, 4.5, 'Quadrant 3'],
    [3.5, null, null, null, null, null, null, null, null, 0, null, null],
    [3.5, null, null, null, null, null, null, null, null, 5, null, null]
  ]);

  var options = {
    title: 'Self vs. Manager comparison (N = 1)',
    hAxis: { title: 'Self', minValue: 0, maxValue: 5 },
    vAxis: { title: 'Manager', minValue: 0, maxValue: 5 },
    colors: ['#4f81bd', '#318687', "#c0514d", '#f79646', '#76933c', "#4bacc6", "#8064a0"],
    seriesType: 'scatter',
    series: {
      7: {
        color: '#333333',
        enableInteractivity: false,
        type: 'line'
      },
      8: {
        color: '#333333',
        enableInteractivity: false,
        type: 'line'
      },
      9: {
        annotations: {
          stem: {
            length: 0
          },
          textStyle: {
            color: 'black'
          }
        },
        color: 'transparent',
        enableInteractivity: false
      }
    }
  };

  var chart = new google.visualization.ComboChart(document.getElementById('chart_div1'));
  chart.draw(data, options);
  window.addEventListener('resize', function () {
    chart.draw(data, options);
  });
});

html, body {
  height: 100%;
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
}

#chart_div1 {
  min-height: 400px;
  height: 100%;
}

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

在 Google 图表（象限图）上书写文本

Writing text on Google Charts ( Quadrant Chart)

javascript

charts

google-visualization