如何为柱形图赋予动态颜色

Question

我有一个Column google-chart 完美地显示在UI 上，我想要做的是给他们每列动态颜色组合

片段

google.charts.load('current', {
  packages: ['corechart']
});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {

  // Define the chart to be drawn.
  var data = google.visualization.arrayToDataTable([
    ['Year', 'amount'],
    ['2012', 900, ],
    ['2013', 1000, ],
    ['2014', 1170, ],
    ['2015', 1250, ],
    ['2016', 1530, ]
  ]);

  var options = {
    title: 'Population (in millions)',
    legend: 'Years', //i want to show legents as year it is showing amount only

  };

  // Instantiate and draw the chart.
  var chart = new google.visualization.ColumnChart(document.getElementById('container'));
  chart.draw(data, options);
}

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js">
</script>

<div id="container" style="width: 100%; height: 400px; margin: 0 auto"></div>

在我上面的 sn-p 中它运行良好，但我想进行一些更改

• 我想设置动态颜色，以便每一列都有不同的颜色
• 在每列有不同的颜色后，我想将图例显示为Years
• 2012 2013 像传奇一样来了

我真的不知道该怎么做，甚至没有想法 请这里的任何人帮助我。

注意 :- 如果有其他开源图表库可以用于 JSON 数据，请告诉我，我尝试了 d3.js，但也没有用

Answer 1

在选项中添加颜色：['skyBlue']

google.charts.load('current', {
  packages: ['corechart']
});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {

  // Define the chart to be drawn.
  var data = google.visualization.arrayToDataTable([
    ['Year', 'Years'],
    
    ['2012', 900 ],
    ['2013', 1000],
    ['2014', 1170],
    ['2015', 1250],
    ['2016', 1530]
  ]);
  
  var options = {
        title: "'Population (in millions)'",
        colors: ['skyBlue']
      };

 

  // Instantiate and draw the chart.
  var chart = new google.visualization.ColumnChart(document.getElementById('container'));
  chart.draw(data, options);
}

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js">
</script>

<div id="container" style="width: 100%; height: 400px; margin: 0 auto"></div>

如果您需要不同颜色的每一列，您可以这样做：

google.charts.load('current', {
  packages: ['corechart']
});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {

  // Define the chart to be drawn.
  var data = google.visualization.arrayToDataTable([
    ['Year', 'Years', { role: 'style' }],
    
    ['2012', 900,'gold' ],
    ['2013', 1000,'skyBlue'],
    ['2014', 1170,'pink'],
    ['2015', 1250,'lightgreen'],
    ['2016', 1530,'#bac']
  ]);
  
  var options = {
        title: "'Population (in millions)'",
        legend: { position: "none" },
      };

 

  // Instantiate and draw the chart.
  var chart = new google.visualization.ColumnChart(document.getElementById('container'));
  chart.draw(data, options);
}

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js">
</script>

<div id="container" style="width: 100%; height: 400px; margin: 0 auto"></div>

还有一个选择，这次是一个图例：

google.charts.load('current', {
  packages: ['corechart']
});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {

  // Define the chart to be drawn.
  var data = google.visualization.arrayToDataTable([
    ['Years', '2012','2013','2014','2015','2016'],
    ['Years',900, 1000, 1170, 1250, 1530]]);
  
  var options = {
        title: "'Population (in millions)'",
        colors: ['gold', 'skyBlue', 'pink','lightgreen','#bac']
      };

 

  // Instantiate and draw the chart.
  var chart = new google.visualization.ColumnChart(document.getElementById('container'));
  chart.draw(data, options);
}

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js">
</script>

<div id="container" style="width: 100%; height: 400px; margin: 0 auto"></div>