javascript - 使用谷歌图表在水平栏中的垂直线注释

Question

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

如果不可能，有什么办法可以做到这一点？

这是我的示例代码：http: //jsfiddle.net/q0ftngve/

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 }
                    });
}

标签： javascriptchartsgoogle-visualization

Answer 1

使用annotation， with -->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加载谷歌图表...

根据发行说明...

通过jsapi加载程序仍然可用的 Google Charts 版本不再持续更新。请从现在开始使用新的 gstatic loader。

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

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

这只会改变load语句，见上面的片段......