Как придать динамический цвет Column-Chart - PullRequest
Новая
       12

Как придать динамический цвет Column-Chart

0 голосов
/ 26 декабря 2018

У меня есть 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, но это тоже не сработало

1 Ответ

0 голосов
/ 26 декабря 2018

Добавить цвета: ['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>
...