Как можно создать гистограмму с помощью API Google Chart?

Question

Можно ли создавать гистограммы в API-интерфейсе Google-диаграммы, кроме как использовать столбчатую диаграмму и назначать соответствующие имена?

Answer 1

Чтобы добавить к ответу mattedgod, столбчатую диаграмму можно теперь создавать с плотно расположенными столбцами, используйте параметр:

bar:  {groupWidth:"100%"};

Answer 2

Google представила пару дней назад гистограмму: ссылка

Answer 3

В Google Charts нет гистограммы, так как это просто библиотека визуализации, вам придется изменить Столбчатую диаграмму в соответствии с вашими потребностями. Однако я подозреваю, что причина, по которой вы не удовлетворены диаграммой столбца, заключается в том, что интервал между столбцами не очень похож на гистограмму. Поэтому я сначала отвечу на этот вопрос:

Можете ли вы контролировать интервал между столбцами в столбчатой ​​диаграмме?

Нет, не сейчас. Смотрите эту цитату из Google Charts Community

В API нет поддержки для контроля расстояния между барами. Возможно, вы сможете взломать его, если захотите покопаться в SVG графика.

Так что это выполнимо, но потребует от вас дополнительной работы. Вы также можете поиграть с опцией конфигурации chartArea, которая будет иметь некоторое влияние на расстояние между столбцами.

Однако исходный вопрос может иметь другой ответ.

Можете ли вы создать диаграмму в виде гистограммы, используя столбчатую диаграмму?

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

Вот простая гистограмма с тремя столбцами:

var data = google.visualization.arrayToDataTable([
    ['x', '1-10', '11-20', '21-30'],
    ['', 3, 5, 4]
  ]);

  // Create and draw the visualization.
  new google.visualization.ColumnChart(document.getElementById('visualization')).
      draw(data,
           {title:"My Histogram",
            width:600, height:400,
            hAxis: {title: null},
            colors: ['red','red','red'],
            legend: {position: 'none'}
           }
      );

Обратите внимание, что у вас есть 1 строка с 3 столбцами, каждый из которых окрашен 'red'. Недостатком этого является то, что вы теряете метки вдоль оси X, говорящие вам, какой столбец представляет что. Опять же, вам понадобится какая-то логика для построения этой гистограммы и заполнения данных так, как вы хотите.

Итак, короче говоря, Google Charts не имеет гистограммы, и, хотя это возможно с колоночной диаграммой, вы можете рассмотреть возможность поиска другой библиотеки.