Question

我正在使用带有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个水平计数。我想添加更多计数。搜索垂直计数和水平计数后，我得到了一些代码： vAxis：{ minValue：0，网格线： { 颜色：'＃f3f3f3'，数：6 } }

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

Answer 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。

如何自定义Google barchart_material图表？

1 个答案: