如何使用Google图表创建自定义条形图？

Question

我想使用Google图表创建条形图 创建图表的条件就像条形图应在条形图之间具有固定的宽度和填充，并且应在网格线的中心绘制。

我为此使用了Google图表。

 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 for the same

我想创建类似这样的东西。

Answer 1

为了获得网格线之间的条形图，
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>