如何自定义Google barchart_material图表？

我正在使用google图表和barchart_material类型创建图表。如何自定义Google barchart_material图表？

这里是

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

的HTML代码，这是工作的罚款Demo。

我想自定义这个图我的要求是：

我需要到1K，2.K改变像100MB正常值，200 MB 这样。
接下来我需要增加垂直计数和水平计数。
然后我需要从图表中删除Year。我只需要2个步骤 Sales和expense。
下一步如何更改栏的颜色？我可以在 Graph中添加一个标签吗？

当我将定位改为

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

我只能看到3个水平计数。我想增加更多的数量。我得到了一些代码搜索垂直计数和类似水平计数后： vAxis：{ minValue（最小值）：0，网格线：{ 颜色： '＃f3f3f3'，数：6 } }

但是，这是现在不工作。任何问题。我怎样才能把这个图表改变到新的水平？需要更改栏颜色，添加标签等。有什么建议吗？

来源

2016-10-22 user2986042

你需要编写代码来做到这一点，如果你想你可以改变一些现有的图表库 – Sajeetharan

我知道这一点。任何链接？ – user2986042

检查答案，让我知道你是否需要任何帮助 – Sajeetharan

您可以使用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。

来源

2016-10-22 09:05:37 Sajeetharan

是的。我会检查这 – user2986042

如何更改高图表中的栏颜色？ – user2986042

你可以设置每个系列的颜色 – Sajeetharan

如何自定义Google barchart_material图表？

回答

相关问题