Google Chart API实施

Question

使用谷歌API在我的项目中实现图表。我使用Scatter图表。 我需要实现如下图表。怎么能实现这个目标。有没有其他方法可以通过使用任何其他开源图表来实现这一点。？

Sample Google Chart which I need

Additional requirement

Answer 1

您可以使用ComboChart来组合散点图和面积系列

区域系列应堆叠
将第一个图层的颜色设置为'transparent'

将null用于系列不重合的值

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

＆＃13;

＆＃13;

google.charts.load('current', {
  callback: drawChart,
  packages: ['corechart']
});

function drawChart() {
  var data = new google.visualization.DataTable();
  data.addColumn('number', 'x');
  data.addColumn('number', 'area bottom');
  data.addColumn('number', 'area top');
  data.addColumn('number', 'scatter');
  data.addRows([
    [1.5, null, null, 1.5],
    [3, 3, 3, null],
    [6, 3, 3, null]
  ]);

  var options = {
    areaOpacity: 1,
    colors: ['transparent', '#ff9900', '#3366cc'],
    hAxis: {
      format: '#,##0.0',
      ticks: [0, 1.5, 3, 4.5, 6],
      title: 'FINAL SCORE'
    },
    height: 320,
    legend: {
      position: 'none'
    },
    isStacked: true,
    seriesType: 'area',
    series: {
      2: {
        type: 'scatter'
      }
    },
    title: 'Final Score',
    vAxis: {
      format: '#,##0.0',
      ticks: [0, 1.5, 3, 4.5, 6],
      title: 'FINAL SCORE'
    },
    width: 320
  };

  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;

＆＃13;

＆＃13;

更新

只需为新要求添加另一个区域图层......

＆＃13;

＆＃13;

google.charts.load('current', {
  callback: drawChart,
  packages: ['corechart']
});

function drawChart() {
  var data = new google.visualization.DataTable();
  data.addColumn('number', 'x');
  data.addColumn('number', 'area bottom');
  data.addColumn('number', 'area middle');
  data.addColumn('number', 'area top');
  data.addColumn('number', 'scatter');
  data.addRows([
    [1.5, null, null, null, 1.5],
    [3, 3, 3, null, null],
    [4.5, 3, 3, null, null],
    [4.5, 3, 1.5, 1.5, null],
    [6, 3, 1.5, 1.5, null]
  ]);

  var options = {
    areaOpacity: 1,
    colors: ['transparent', '#ff9900', '#f8bbd0', '#3366cc'],
    hAxis: {
      format: '#,##0.0',
      ticks: [0, 1.5, 3, 4.5, 6],
      title: 'FINAL SCORE'
    },
    height: 320,
    legend: {
      position: 'none'
    },
    isStacked: true,
    seriesType: 'area',
    series: {
      3: {
        type: 'scatter'
      }
    },
    title: 'Final Score',
    vAxis: {
      format: '#,##0.0',
      ticks: [0, 1.5, 3, 4.5, 6],
      title: 'FINAL SCORE'
    },
    width: 320
  };

  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;

＆＃13;

＆＃13;