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

Posted 2021-04-09

我想使用谷歌图表创建条形图条件创建图表就像条形应该有固定宽度和条形之间的填充，它应该是在网格线的中心绘图。

我使用谷歌图表。

 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

我想创造这样的东西。

答案

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

以上是关于如何使用谷歌图表创建自定义条形图？的主要内容，如果未能解决你的问题，请参考以下文章

在超集中构建自定义马条形图并添加自定义项以自定义图表

在谷歌列图表中显示条形图上的类型名称

如何在谷歌图表上使用mysql数据

谷歌图表，如何在甘特图上添加自定义点？

更改静态谷歌图表 [条形图] 背景颜色

Google图表（可视化）中堆积条形图中的第三个条形图无效