如何自定义谷歌条形图素材图表？答案

【问题标题】：How to customize Google barchart_material chart?如何自定义谷歌条形图素材图表？
【发布时间】：2016-10-22 07:15:05
【问题描述】：

我正在使用带有 barchart_material 类型的谷歌图表创建图表。

这是来自

的HTML代码

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['bar']});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Year', 'Sales', 'Expenses'],
          ['2014', 1000, 400],
          ['2015', 1170, 460],
          ['2016', 660, 1120],
          ['2017', 1030, 540]
        ]);

        var options = {
          chart: {
            title: 'Company Performance',
            subtitle: 'Sales, Expenses, and Profit: 2014-2017',
          },
          bars: 'horizontal' // Required for Material Bar Charts.
        };

        var chart = new google.charts.Bar(document.getElementById('barchart_material'));

        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="barchart_material" style="width: 900px; height: 500px;"></div>
  </body>
</html>

这工作正常Demo。

我想定制这个图表我的要求是：

我需要将 1k 、 2.k 更改为正常值，例如 100MB 、 200 MB 像这样。
接下来我需要增加垂直计数和水平计数。
然后我需要从图表中删除 Year 。我只需要 2 辆婴儿车 Sales 和 expense 。
接下来如何更改条形颜色？我可以在里面添加一个标签吗图表？

当我将对齐方式更改为

<div id="barchart_material" style="width: 700px; height: 400px;"></div>

我只能看到 3 个水平计数。我想添加更多计数。在搜索垂直计数和水平计数后，我得到了一些代码，例如：垂直轴：{ 最小值：0，网格线： { 颜色：'#f3f3f3', 计数：6 } }

但这现在不起作用。任何问题。如何将此图表更改为新级别？需要更改条形颜色，添加标签等。有什么建议吗？

【问题讨论】：

您需要编写代码来执行此操作，如果您愿意，可以更改为一些现有的图表库
我知道。有链接吗？
检查答案，如果您需要任何帮助，请告诉我

标签： javascript charts google-visualization

【解决方案1】：

您可以使用 HighCharts 作为您的 puprose，它提供了很多自定义选项，

使用 Highcharts 的相同图表：

  $scope.chartXLabels = ['Year', 'Sales', 'Expenses'];
  $scope.chartSeries = [
  {
    "name": "2014",
    "data": [1000, 400]
  },
  {
    "name": "2015",
    "data": [ 1170, 460]
  },
  {
    "name": "2017",
    "data": [ 1170, 460]
  }
];


  console.log($scope.chartSeries);
  $scope.chartConfig = {
    options: {
      chart: {
        type: 'line'
      },
      plotOptions: {

      },
      yAxis: {
        title: {
          text: 'Usage'
        }
      }
    },
    xAxis: {
      title: {
        text: 'Date'
      },
      categories: $scope.chartXLabels
    },
    series: $scope.chartSeries,
    title: {
      text: 'User Usage Monthly'
    },
    credits: {
      enabled: false
    },
    loading: false
  }

这是sample。

【讨论】：

是的。我会检查这个
如何更改高位图表中的条形颜色？
您可以为每个系列设置颜色
是的。伟大的。 soory 另一个疑问是否有任何选项可以将 x 轴形式从 0、1、3 更改为 0MB、1 MB、2 MB 等。意味着可以定制吗？我可以在栏上添加标签文本吗？谢谢。