如何使用 laravel 中的 google 图表创建象限图，如下图所示？

Question

我想使用 google 图表或 chartjs 在 laravel 中创建此图表。

这是我要使用 Google 图表创建的象限图图像 API:

Click here 看大图。

到目前为止，这是我的代码：

 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: [
      // scatter
      //{c:[{v: 14}, {v: 130}, null, null, null, null]},
     // [3.5,  130, null, null, null, null,null,'celk'],
      // colors
      {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']},
      //{c:[{v: 10}, null, {v: null}, {v: null}, {v: 200}, {v: 130}]},
      //{c:[{v: 15}, null, {v: null}, {v: null}, {v: 230}, {v: 130}]},
    ],
  });

  var options = {
    colors: ['#00ffff'],
    legend: 'none',
    backgroundColor: { fill:'transparent' },
    hAxis: {
      ticks: [ 7.5, 15],
      title: 'Index'
    },
    height: 400,
    isStacked: true,
    series: {
      // Left-Low
      1: {
        areaOpacity: 1,
        color: '#e53935',
        enableInteractivity: false,
        type: 'area',
        visibleInLegend: false,
        text :'wo',
      },

      // Left-High
      2: {
        areaOpacity: 1,
        color: '#43a047',
        enableInteractivity: false,
        type: 'area',
        visibleInLegend: false
      },

      // Right-Low
      3: {
        areaOpacity: 1,
        color: '#43a047',
        enableInteractivity: false,
        type: 'area',
        visibleInLegend: false
      },

      // Right-High
      4: {
        areaOpacity: 1,
        color: 'yellow',
        enableInteractivity: false,
        type: 'area',
        visibleInLegend: false
      },
      // Right-High
     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);
});

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

我找不到类似的图表。

只能找到这个https://github.com/chartjs/Chart.js/issues/3535 还有这个 https://developers.google.com/chart/interactive/docs/gallery/scatterchart.

另外，我想问一下填色区怎么写文字？像 q1,q2,q3,q4,q5

我不明白使用 google 图表。

Answer 1

我只能做这个

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'},
      {type: 'string', role: 'annotation'},
    ],
    rows: [
      // scatter
      //{c:[{v: 14}, {v: 130}, null, null, null, null, null,{v: 'test'}]},
      {c:[{v: 11.25},  null, null, null, null, null,{v: 85},{v: 'Q3'}]},
      {c:[{v: 3.75},  null, null, null, null, null,{v: 85},{v: 'Q1'}]},
      {c:[{v: 3.75},  null, null, null, null, null,{v: 235},{v: 'Q2'}]},
      {c:[{v: 11.25},  null, null, null, null, null,{v: 235},{v: 'Q4'}]},
     // [3.5,  130, null, null, null, null,null,'celk'],
      // colors
      {c:[{v: 1}, null, {v: 170}, {v: 130}, null, 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,{v: 'test'}]},
      //{c:[{v: 10}, null, {v: null}, {v: null}, {v: 200}, {v: 130}]},
      //{c:[{v: 15}, null, {v: null}, {v: null}, {v: 230}, {v: 130}]},
      
    ],
  });

  var options = {
    colors: ['#00ffff'],
    legend: 'none',
    backgroundColor: { fill:'transparent' },
    hAxis: {
      ticks: [ 7.5, 15],
      title: 'Index'
    },
    height: 400,
    isStacked: true,
    series: {
      // Left-Low
      1: {
        areaOpacity: 1,
        color: '#dcf0ef',
        enableInteractivity: false,
        type: 'area',
        visibleInLegend: false,
        text :'wo',
      },

      // Left-High
      2: {
        areaOpacity: 1,
        color: '#43a047',
        enableInteractivity: false,
        type: 'area',
        visibleInLegend: false
      },

      // Right-Low
      3: {
        areaOpacity: 1,
        color: '#43a047',
        enableInteractivity: false,
        type: 'area',
        visibleInLegend: false
      },

      // Right-High
      4: {
        areaOpacity: 1,
        color: 'yellow',
        enableInteractivity: false,
        type: 'area',
        visibleInLegend: false
      },
      // Right-High
     5: {
        areaOpacity: 1,
        color: 'red',
        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);
});

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

如何使用 laravel 中的 google 图表创建象限图，如下图所示？

How to create quadrant chart using google chart in laravel like this picture?

javascript

google-visualization