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>

在上面的代码段中，它运行良好，但我想进行一些更改

我想添加动态颜色，以便每列具有不同的颜色
每列具有不同的颜色后，我想将图例显示为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>

如何为柱状图赋予动态色彩

1 个答案: