如何在Laravel中使用Google Chart实现目标象限图并在色块中添加标注

实现需求 #

需要实现带有5个彩色分区的目标象限图，可在各个分区内添加q1、q2、q3、q4、q5的文字标注

现有可运行基础代码 #

HTML 代码 #

<script type="text/javascript" charset="UTF-8" src="https://www.gstatic.com/charts/loader.js" ></script>
<div id="chart_div1"></div>

JS 代码 #

google.charts.load('current', {
 packages:['corechart']
}).then(function () {
  var dataTable = new google.visualization.DataTable({
    cols: [
      {label: 'X', type: 'number'},
      {label: 'Left-Low', type: 'number'},
      {label: 'Left-High', type: 'number'},
      {label: 'Right-Low', type: 'number'},
      {label: 'Right-High', type: 'number'},
      {label: 'Right-High-High', type: 'number'},
     
      {label: 'Y', type: 'number'},
      {label:'title',type: 'string', role: 'annotation'},
    ],
    rows: [
      {c:[{v: 1}, null, {v: 170}, {v: 130}, null, null]},
      {c:[{v: 7.5}, null, {v: 170}, {v: 130}, null, null]},
   
      {c:[{v: 7.5}, null, {v: null}, {v: null}, {v: 170}, {v: 130}]},
      {c:[{v: 10}, null, {v: null}, {v: null}, {v: 170}, {v: 130}]},
      {c:[{v: 10}, null, {v: null}, {v: null}, {v: 170}, {v: 100}]},
      {c:[{v: 15}, null, {v: null}, {v: null}, {v: 170}, {v: 100}]},
      {c:[{v: 10}, null, {v: null}, {v: null},{v: null}, {v: 270}, {v: 30}]},
      {c:[{v: 15}, null, {v: null}, {v: null},{v: null}, {v: 270}, {v: 30}]},
     
      {c:[{v: 3.5}, null, {v: 170}, {v: 100}, null, null,null,'celk']},
    ],
  });

  var options = {
    colors: ['#00ffff'],
    legend: 'none',
    backgroundColor: { fill:'transparent' },
    hAxis: {
      ticks: [ 7.5, 15],
      title: 'Index'
    },
    height: 400,
    isStacked: true,
    series: {
      1: {
        areaOpacity: 1,
        color: '#e53935',
        enableInteractivity: false,
        type: 'area',
        visibleInLegend: false,
      },
      2: {
        areaOpacity: 1,
        color: '#43a047',
        enableInteractivity: false,
        type: 'area',
        visibleInLegend: false
      },
      3: {
        areaOpacity: 1,
        color: '#43a047',
        enableInteractivity: false,
        type: 'area',
        visibleInLegend: false
      },
      4: {
        areaOpacity: 1,
        color: 'yellow',
        enableInteractivity: false,
        type: 'area',
        visibleInLegend: false
      },
     5: {
        areaOpacity: 1,
        color: 'blue',
        enableInteractivity: false,
        type: 'area',
        visibleInLegend: false
      },
     7 : {
        annotations: {
          stem: {
            length: 0
          },
          textStyle: {
            color: 'black'
          }
        }
      },
    },
    seriesType: 'scatter',
    vAxis: {
      ticks: [ 170, 300],
      title: '1'
    }
  };

  var chart = new google.visualization.ComboChart(document.getElementById('chart_div1'));
  chart.draw(dataTable, options);
});

给色块添加q1-q5标注的实现方法 #

在原有代码的chart.draw(dataTable, options);后追加以下代码，通过监听图表渲染完成事件手动注入标注即可，坐标可根据实际色块位置调整：

google.visualization.events.addListener(chart, 'ready', function () {
  const layout = chart.getChartLayoutInterface();
  const svg = document.querySelector('#chart_div1 svg');
  // 按实际分区位置定义标注的坐标和文本
  const quadrants = [
    {x: 4, y: 150, text: 'q1'},
    {x: 4, y: 80, text: 'q2'},
    {x: 8.75, y: 150, text: 'q3'},
    {x: 12.5, y: 135, text: 'q4'},
    {x: 12.5, y: 60, text: 'q5'}
  ];
  quadrants.forEach(q => {
    const posX = layout.getXLocation(q.x);
    const posY = layout.getYLocation(q.y);
    const textNode = document.createElementNS('http://www.w3.org/2000/svg', 'text');
    textNode.setAttribute('x', posX);
    textNode.setAttribute('y', posY);
    textNode.setAttribute('text-anchor', 'middle');
    textNode.setAttribute('fill', '#000');
    textNode.setAttribute('font-size', '14px');
    textNode.textContent = q.text;
    svg.appendChild(textNode);
  });
});

Laravel 集成方法 #

把HTML代码放到对应blade视图文件中，JS代码可直接写入视图的<script>标签，也可打包到项目的JS资源文件中引用即可，不需要额外安装依赖。

内容的提问来源于stack exchange，提问作者Baharudin Jx