如何在可视化上添加点：面积图

Question

如何在Google Charts Visualization：Area图表中添加一个点，如上图所示的红点，我可以在点上方或旁边放置一些标签吗？

以下是输出上图

的代码

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

  function drawChart() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Output1');
    data.addColumn('number', 'Height');
    data.addColumn({type:'string', role:'annotation'});
    data.addRows([
      <?php echo"['',  2, null],"; ?>
      <?php echo"['',  2, '1 Kpa ---------->'],"; ?>
      <?php echo"['2',   1, '<---------- 2'],"; ?>
      <?php echo"['3 σ',   0, '<---------- 3 σ']"; ?>
    ]);

    var options = {
      title: 'Total Stress',
      hAxis: {title: '<-------- Direction',  titleTextStyle: {color: '#333'}},
      vAxis: { ticks: [{v:2, f:'1 Kpa ->'}, {v:1, f:'1 m'},{v:0, f:'length ^ 1 m'},{v:0, f:'1 m'}] }
    };

    var chart = new google.visualization.AreaChart(document.getElementById('total_stress'));
    chart.draw(data, options);
  }

Answer 1

您可以使用ComboChart来组合系列类型

在数据表中添加另一列

在选项中，定义系列类型，使用'scatter'作为点

seriesType: 'area',
series: {
  1: {
    type: 'scatter'
  }
}

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

＆＃13;

＆＃13;

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Output1');
  data.addColumn('number', 'Height');
  data.addColumn({type:'string', role:'annotation'});
  data.addColumn('number', 'Scatter');
  data.addRows([
    ['',  2, null, null],
    ['',  2, '1 Kpa ---------->', 1],
    ['2',   1, '<---------- 2', null],
    ['3 s',   0, '<---------- 3 s', null]
  ]);

  var options = {
    title: 'Total Stress',
    hAxis: {title: '<-------- Direction',  titleTextStyle: {color: '#333'}},
    vAxis: { ticks: [{v:2, f:'1 Kpa ->'}, {v:1, f:'1 m'},{v:0, f:'length ^ 1 m'},{v:0, f:'1 m'}] },
    seriesType: 'area',
    series: {
      1: {
        type: 'scatter'
      }
    }
  };

  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;