Как создать собственную гистограмму с помощью Google-карт? - PullRequest
Новая
       22

Как создать собственную гистограмму с помощью Google-карт?

0 голосов
/ 04 сентября 2018

Я хочу создать гистограмму, используя диаграммы Google Условие для создания диаграммы такое, что Бар должен иметь фиксированную ширину и отступ между барами, и он должен располагаться в центре линий сетки.

Я использовал Google Chart для этого. 

 google.charts.load("current", {packages:['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ["Element", "Density", { role: "style" } ],
    ["Copper", 8.94, "#b87333"],
    ["Silver", 10.49, "silver"],
    ["Gold", 19.30, "gold"],
    ["Platinum", 21.45, "color: #e5e4e2"]
  ]);

  var view = new google.visualization.DataView(data);
  view.setColumns([0, 1,
                   { calc:  getValueAt.bind(undefined, 1),
                     sourceColumn: 1,
                     type: "string",
                     role: "annotation" },
                   2]);

  var options = {
    title: "Density of Precious Metals, in g/cm^3",
    width: 600,
    height: 400,
    bar: {
        groupWidth: 20
    },
    legend: { position: "none" },
  };
  var chart = new google.visualization.ColumnChart(document.getElementById("columnchart_values"));
  chart.draw(view, options);
   }
   function getValueAt(column, dataTable, row) {
    return dataTable.getFormattedValue(row, column);
  }

JsFiddle для того же

Я хочу создать что-то вроде этого.

Design

1 Ответ

0 голосов
/ 04 сентября 2018

чтобы получить бары между линиями сетки,
нужно будет использовать непрерывный тип данных для оси X,
timeofday будет работать, который принимает массив из 3 или 4 чисел,
представляет часы, минуты, секунды и, необязательно, миллисекунды соответственно 

['Time', 'Value'],
[[9, 30, 0], 20],
[[10, 30, 0], 30],
...

установить значения данных на полминутной отметке,
затем используйте ticks на отметке полной минуты ... 

ticks: [
  [9, 0, 0],
  [10, 0, 0],
  ...

для заполнения между столбцами используйте процент ... 

bar: {
  groupWidth: '95%'
},

см. Следующий рабочий фрагмент ... 

google.charts.load('current', {
  packages:['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['Time', 'Value'],
    [[9, 30, 0], 20],
    [[10, 30, 0], 30],
    [[11, 30, 0], 57],
    [[12, 30, 0], 70],
    [[13, 30, 0], 80],
    [[14, 30, 0], 55],
    [[15, 30, 0], 45],
    [[16, 30, 0], 20],
  ]);

  var view = new google.visualization.DataView(data);
  view.setColumns([0, 1, {
    calc: function (dt, row) {
      return dt.getFormattedValue(row, 1);
    },
    role: 'annotation',
    type: 'string'
  }]);

  var options = {
    annotations: {
      alwaysOutside: true,
      stem: {
        color: '#cb4335',
        length: 20,
      },
    },
    bar: {
      groupWidth: '95%'
    },
    colors: ['#cb4335'],
    hAxis: {
      format: 'ha',
      gridlines: {
        color: 'transparent'
      },
      ticks: [
        [9, 0, 0],
        [10, 0, 0],
        [11, 0, 0],
        [12, 0, 0],
        [13, 0, 0],
        [14, 0, 0],
        [15, 0, 0],
        [16, 0, 0],
      ],
    },
    height: 400,
    legend: {position: 'none'},
    tooltip: {trigger: 'none'},
    vAxis: {
      textStyle: {
        color: 'transparent'
      }
    },
  };

  var chart = new google.visualization.ColumnChart(document.getElementById('columnchart_values'));
  chart.draw(view, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="columnchart_values"></div>

РЕДАКТИРОВАТЬ

, чтобы расширить линии сетки, используйте опцию hAxis.viewWindow.min & max

и chartArea.width могут расширять диаграмму до краев контейнера диаграммы

см. Следующий рабочий фрагмент ... 

google.charts.load('current', {
  packages:['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['Time', 'Value'],
    [[9, 30, 0], 20],
    [[10, 30, 0], 30],
    [[11, 30, 0], 57],
    [[12, 30, 0], 70],
    [[13, 30, 0], 80],
    [[14, 30, 0], 55],
    [[15, 30, 0], 45],
    [[16, 30, 0], 20],
  ]);

  var view = new google.visualization.DataView(data);
  view.setColumns([0, 1, {
    calc: function (dt, row) {
      return dt.getFormattedValue(row, 1);
    },
    role: 'annotation',
    type: 'string'
  }]);

  var options = {
    annotations: {
      alwaysOutside: true,
      stem: {
        color: '#cb4335',
        length: 20,
      },
    },
    bar: {
      groupWidth: '95%'
    },
    chartArea: {
      width: '100%'
    },
    colors: ['#cb4335'],
    hAxis: {
      format: 'ha',
      gridlines: {
        color: 'transparent'
      },
      ticks: [
        [9, 0, 0],
        [10, 0, 0],
        [11, 0, 0],
        [12, 0, 0],
        [13, 0, 0],
        [14, 0, 0],
        [15, 0, 0],
        [16, 0, 0],
      ],
      viewWindow: {
        min: [6, 0, 0],
        max: [20, 0, 0]
      }
    },
    height: 400,
    legend: {position: 'none'},
    tooltip: {trigger: 'none'},
    vAxis: {
      textStyle: {
        color: 'transparent'
      }
    },
  };

  var chart = new google.visualization.ColumnChart(document.getElementById('columnchart_values'));
  chart.draw(view, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="columnchart_values"></div>
...