Вертикальная линия аннотации на горизонтальной панели с помощью Google Chart - PullRequest
Новая
       55

Вертикальная линия аннотации на горизонтальной панели с помощью Google Chart

1 голос
/ 04 мая 2020

Просто хотите спросить, возможно ли добавить многострочную аннотацию для бара на основе даты? Затем, если я наведу курсор на строку, она должна отобразить дату.

Если это невозможно, есть ли способ сделать это?

enter image description here

Вот мой пример кода: 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 }
                    });
}

1 Ответ

1 голос
/ 04 мая 2020

с использованием аннотации с -> style: 'line'
фактически выдает горизонтальную линию
и отображает текст на панели.
, чтобы получить что-то для отображения однако, вам также потребуется использовать annotationText

, вместо этого может быть проще использовать другой тип серии ...

см. следующий рабочий фрагмент,
a серия строк используется для отображения линий на столбцах ... 

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-карт ...

согласно примечаниям к выпуску ...

Версия Google Charts, которая остается доступной через загрузчик jsapi, больше не обновляется последовательно. Пожалуйста, используйте новые gstati c loader с этого момента.

более новую библиотеку можно найти здесь ...

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

это только изменит оператор load, см. Фрагмент выше ...

...