使用 Google 图表的水平条中的垂直线注释

Question

只想问是否可以根据日期为每个柱添加多行注释？然后，如果我将鼠标悬停在该行上，它应该会显示日期。

如果不可能，有什么办法吗？

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

function drawChart() {
            var data = new google.visualization.DataTable();
             data.addColumn('string', 'Display Order');
            data.addColumn('date', 'Dummy');
            data.addColumn('date', 'Introduction');
            data.addColumn('date', 'Presentation');
            data.addColumn('date', 'Demonstration');
            data.addColumn('date', 'Evaluation');
            data.addColumn('date', 'Negotiation');
            data.addColumn('date', 'Approval');
            data.addColumn('date', 'Purchase');

            data.addRows([
               [
                   'P0003-0000001',
                   new Date('2020-04-02'),
                   new Date('1970-01-14'),
                   new Date('1970-01-16'),
                   new Date('1970-01-23'),
                   new Date('1970-01-22'),
                   new Date('1970-02-03'),
                   new Date('1970-01-17'),
                   new Date('1970-02-01')
                ]
            ]);

            var dateMin = new Date('2020-4-1');

            new google.visualization.BarChart(document.getElementById('progress_chart')).
                draw(data,
                    {
                        width: "100%",
                        bar: {groupWidth: "90%"},
                        backgroundColor: "whitesmoke",
                        legend: { position: "none" },
                        isStacked: true,
                        hAxis: {
                            viewWindow: {
                                // max: new Date(2020,5,1),
                                min: dateMin,
                            },
                            // format: 'M/d/yy',
                            // baseline: dateToday,
                            // baselineColor: 'red',
                        },
                        bar: { groupWidth: 20 }
                    });
}

Answer 1

使用 annotation，--> style: 'line'
实际上会产生一条水平线，
并会在栏上显示文本。
要在悬停时显示某些内容，您还需要使用 annotationText

相反，使用不同的系列类型可能更容易...

请参阅以下工作片段，
线系列用于显示条上的线...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Display Order');
  data.addColumn('date', 'Dummy');
  data.addColumn('date', 'Date');
  data.addColumn('date', 'Date');
  data.addColumn('date', 'Date');
  data.addColumn('date', 'Date');
  data.addColumn('date', 'Introduction');
  data.addColumn('date', 'Presentation');
  data.addColumn('date', 'Demonstration');
  data.addColumn('date', 'Evaluation');
  data.addColumn('date', 'Negotiation');
  data.addColumn('date', 'Approval');
  data.addColumn('date', 'Purchase');

  data.addRow([
    'P0003-0000001',
    new Date('2020-04-02'),
    new Date('2020-04-03'),
    new Date('2020-04-04'),
    new Date('2020-04-05'),
    new Date('2020-04-06'),
    new Date('1970-01-14'),
    new Date('1970-01-16'),
    new Date('1970-01-23'),
    new Date('1970-01-22'),
    new Date('1970-02-03'),
    new Date('1970-01-17'),
    new Date('1970-02-01')
  ]);

  var dateMin = new Date('2020-4-1');

  new google.visualization.BarChart(document.getElementById('progress_chart')).
  draw(data, {
    width: '100%',
    bar: {
      groupWidth: '90%'
    },
    backgroundColor: 'whitesmoke',
    legend: {
      position: 'none'
    },
    isStacked: true,
    hAxis: {
      viewWindow: {
        // max: new Date(2020,5,1),
        min: dateMin,
      },
      // format: 'M/d/yy',
      // baseline: dateToday,
      // baselineColor: 'red',
    },
    bar: {
      groupWidth: 20
    },
    annotations: {
      boxStyle: {
        stroke: '#fff',
        strokeWidth: 1
      }
    },
    series: {
      1: {
        color: '#fff',
        pointShape: {
          type: 'star', sides: 2, dent: 0.05
        },
        pointSize: 24,
        type: 'line'
      },
      2: {
        color: '#fff',
        pointShape: {
          type: 'star', sides: 2, dent: 0.05
        },
        pointSize: 24,
        type: 'line'
      },
      3: {
        color: '#fff',
        pointShape: {
          type: 'star', sides: 2, dent: 0.05
        },
        pointSize: 24,
        type: 'line'
      },
      4: {
        color: '#fff',
        pointShape: {
          type: 'star', sides: 2, dent: 0.05
        },
        pointSize: 24,
        type: 'line'
      },
    }
  });
});

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

注意：建议使用loader.js，而不是jsapi来加载google图表...

根据 release notes...

The version of Google Charts that remains available via the jsapi loader is no longer being updated consistently. Please use the new gstatic loader from now on.

可以在这里找到更新的库...

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

这只会更改 load 语句，请参阅上面的代码片段...

使用 Google 图表的水平条中的垂直线注释

Vertical line annotation in horizontal bar using Google Chart

javascript

charts

google-visualization