Цвет столбца диаграммы гистограммы (столбчатая диаграмма) Google не работает

Я хочу нарисовать простуюстолбчатая диаграмма вHTML-JavaScript с помощьюgoogle chart.Я использовалGoogle materiel chart CDN нарисовать столбчатую диаграмму4 ряда с 4 разными цветами.

Я перепробовал множество вариантов, но ничего не работает должным образом. когда я использовалcolors: ['#b0120a', '#004411', '#ffab91', '#004411'] во всех 4 столбцах отображается только первый цвет. Я также пытался{role:'style'} но все еще не работает.

<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.load('visualization', '1', {packages: ['corechart', 'bar']});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {

        /*var data = google.visualization.arrayToDataTable([
          ['Class', 'Total',{role: 'style'}],
          ['A', 10,'color: #b0120a'],
          ['B', 30,'color: #004411'],
          ['C', 20,'color: #ffab91'],
          ['D', 30,'color: #004411']
        ]);*/
        var data = google.visualization.arrayToDataTable([
          ['Class', 'Total'],
          ['A', 10],
          ['B', 30],
          ['C', 20],
          ['D', 30]
        ]);

        var options = {
          isStacked: true,
          title: 'Class wise total students',
          colors: ['#b0120a', '#004411', '#ffab91', '#004411'],
         };

        var chart = new google.charts.Bar(document.getElementById('columnchart_material'));
        chart.draw(data, google.charts.Bar.convertOptions(options));
      }
    </script>
</head>
<body>
<div id="columnchart_material" style="width: 100%; height: 100%;"></div>
</body>
</html>

Диаграмма похожа на:

Но я хочу 4 разных цвета для 4 колонок. Заранее спасибо.

 WhiteHat24 июл. 2016 г., 18:45
 Avishek25 июл. 2016 г., 12:31
Я искал все эти связанные вопросы по stackoverflow, но не нашел ничего более тонкого в своем вопросе, поэтому я разместил свой вопрос отдельно.

Ответы на вопрос(1)

Решение Вопроса

наконец-то я исправил это, и именно таким я и хотел быть. Пожалуйста, смотрите код ниже, если вам требуется время.

<html>
<head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('visualization', '1.1', {packages: ['corechart']});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {    
        var data = google.visualization.arrayToDataTable([
          ['Class', 'Total',{role: 'style'}],
          ['A', 10,'color: #b0120a'],
          ['B', 30,'color: #004411'],
          ['C', 20,'color: #ffab91'],
          ['D', 30,'color: #004411']
        ]);

        var options = {
          isStacked: false,
          title: 'Class wise total students',
         };

        var chart = new google.visualization.ColumnChart(document.getElementById('columnchart_material'));
        chart.draw(data, options);
      }
    </script>
</head>
<body>
<div id="columnchart_material" style="width: 100%; height: 100%;"></div>
</body>
</html>

Мне нужно изменить определениеchart Вот. Отvar chart = new google.charts.Bar(document.getElementById('columnchart_material')); к измененному какvar chart = new google.visualization.ColumnChart(document.getElementById('columnchart_material'));, Теперь это работает. Диаграмма похожа на ....

 Avishek25 июл. 2016 г., 12:27
да ты прав @WhiteHat ..
 WhiteHat24 июл. 2016 г., 18:45
Ты понял,роли столбцов, в том числе'style', не работай наматериал только графикиядро графики.Вот другие варианты ...
 Peter05 апр. 2018 г., 18:55
Пример показывает, что цвета могут быть установлены, но я думаю, что это решение - просто преобразование диаграммы материала обратно в классическую диаграмму столбца. Приятные преимущества материала графика (закругленные углы, современный дизайн) исчезнут.

Ваш ответ на вопрос