Question

    <html>
<head>
 <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript">
 var a=4;
    var b=8;

    google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Age', 'Weight'],
          [ a,      b]

        ]);

        var options = {
          title: 'Assessing Value/Risk of a Contract',
          hAxis: {title: 'Risk', minValue: 0, maxValue: 40},
          vAxis: {title: 'Value', minValue: 0, maxValue: 40},
          legend: 'none'
        };

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

        chart.draw(data, options);
      }
  </script>
  </head>
  <body>
  <div id="chart_div" style="width: 500px; height: 500px;"></div>
  </body>
</html>

这是谷歌图表，我是在谷歌图表的帮助下创建的。我想在核心图表中间有一个象限，我试过但无法找到任何答案。谢谢提前

Answer 1

听起来像你想要遮蔽图表的特定区域

这可以使用组合图表来完成，其中象限的区域系列

为了绘制一个从x轴上方开始的框，需要两个区域系列......

使用选项 - ＆gt; isStacked: true
第一个区域系列用于在x轴和象限之间创建空间并给出一种颜色 - ＆gt; 'transparent'

第二个区域系列用于遮挡象限

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

＆＃13;

google.charts.load('current', {
  callback: drawChart,
  packages: ['corechart']
});

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Age', 'Weight', 'Quad-Bottom', 'Quad-Top'],
    [4, 8, null, null],  // <-- scatter series data
    [2, null, 4, 12],    // <-- quadrant data
    [6, null, 4, 12]     // <-- quadrant data
  ]);

  var options = {
    title: 'Assessing Value/Risk of a Contract',
    hAxis: {title: 'Risk', minValue: 0, maxValue: 40},
    vAxis: {title: 'Value', minValue: 0, maxValue: 40},
    legend: 'none',
    seriesType: 'scatter',
    series: {
      0: {
        color: '#e64a19',
        pointShape: {
          type: 'star',
          sides: 4,
          dent: 0.5
        },
        pointSize: 12,
        pointsVisible: true,
        type: 'scatter'
      },
      1: {
        areaOpacity: 1,
        color: 'transparent',
        type: 'area'
      },
      2: {
        areaOpacity: 1,
        color: '#b2dfdb',
        type: 'area'
      }
    },
    isStacked: true
  };

  var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
  chart.draw(data, options);
}

＆＃13;

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

＆＃13;

如何将象限实现到核心图表中？

1 个答案: