Как настроить диаграмму Google barchart_material?

Я создаю диаграмму, используя диаграмму google с типом barchart_material.Как настроить диаграмму Google 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 } }

Но это теперь не работает. Какие-то проблемы . Как я могу изменить этот график на новый уровень? нужно изменить цвет бара, добавить ярлык и т. д. Любые предложения?

источник

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?

ответ

Смежные вопросы