使用Google图表在水平栏中标注垂直线 [英] Vertical line annotation in horizontal bar using Google Chart

问题描述

只是想问一问是否可以根据日期在每个小节上添加多行注释吗?然后，如果我将鼠标悬停在该行上，它应该显示日期.

Just want to ask if it's possible to add multiple line annotation per bar based on date? Then if I hover the line, it should display the date.

如果不可能的话，有什么办法吗?

If it's not possible is there any way to do this?

这是我的示例代码: 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 }
                    });
}

推荐答案

使用注释，具有-> 样式:线"
实际上会产生一条水平线，
并会在栏上显示文本.
要在悬停时显示某些内容，您还需要使用 annotationText

相反，使用其他系列类型可能会更容易...

instead, it may easier to use a different series type...

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

see following working snippet,
a line series is used to display the lines on the bars...

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图表...

NOTE: recommend using loader.js, rather than jsapi to load google charts...

根据发行说明 ...

通过 jsapi 加载程序仍然可用的Google Charts版本不再被一致更新.从现在开始，请使用新的gstatic loader .

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.

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

the newer library can be found here...

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

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

this will only change the load statement, see above snippet...

这篇关于使用Google图表在水平栏中标注垂直线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！