グーグル

を動作していない材料チャート縦棒グラフ（バーチャート）カスタム列の色は4色の異なる4列を有する縦棒グラフを描画するためにGoogle materiel chart CDNを使用している 。グーグル

私はたくさんのオプションを試しましたが、何も正しく機能していません。 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つの異なる色をしたいです。ありがとうございます。

出典

2016-07-24 Avishek

[Google棒グラフは個々の棒色を変更できません]（http://stackoverflow.com/questions/36437422/google-bar-chart-cannot-change-個々のバーの色） – WhiteHat

私はこれらの関連するすべての質問をstackoverflowで検索しましたが、私の質問にはそれほどスリムではありませんでした。 – Avishek

最後に、私はこれを正しいものにして、正確に私はなりたいと思っていました。いつか必要な場合は、以下のコードをご覧ください。

<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'));。それは今働いている。グラフは次のようなものです....

出典

2016-07-24 11:46:04 Avishek

あなたはそれを持っていますが、[column roles]（https://developers.google.com/chart/interactive/docs/roles#what-roles-are-available）は 'style''を含めて_Material_Chartsでは動作しません、_Core_チャートのみ。 [ここに]（http://stackoverflow.com/a/36452554/5090771）いくつかの他のオプションがあります... – WhiteHat

はいu rは右@WhiteHat .. – Avishek

答えて

関連する問題