Блог

Главная - Вопросы по программированию - Столбчатая диаграмма различий в Google — изменение цвета панели

Столбчатая диаграмма различий в Google — изменение цвета панели

#google-visualization

#google-визуализация

Вопрос:

У меня есть гистограмма различий в Google. Я пытаюсь изменить цвет внешней панели. По умолчанию это блеклый цвет. Я могу изменить цвет внутренней панели с помощью параметра color в разделе options. Может кто-нибудь подсказать мне, пожалуйста? Вот мой код ниже.

 <script type="text/javascript" src="https://www.google.com/jsapi"></script>
  <script type="text/javascript">
    google.load("visualization", '1.1', {packages:['corechart']});
    google.setOnLoadCallback(drawChart);
function drawChart() {
var oldData = google.visualization.arrayToDataTable([
  ['Name', 'Popularity'],
  ['Cesar', 250],
  ['Rachel', 4200],
  ['Patrick', 2900],
  ['Eric', 8200]
]);

var newData = google.visualization.arrayToDataTable([
  ['Name', 'Popularity'],
  ['Cesar', 370],
  ['Rachel', 600],
  ['Patrick', 700],
  ['Eric', 3500]
]);
var colChartDiff = new google.visualization.ColumnChart(document.getElementById('colchart_diff'));
var options = { 
diff: { newData: { widthFactor: 0.6 } },
legend: { position: 'top' } ,
colors: ['#f38eff', '#C0C0C0'],
backgroundColor: '#fffff5',
hAxis: {title: 'People'},
  vAxis: {title: 'Numbers'}};
var diffData = colChartDiff.computeDiff(oldData, newData);
colChartDiff.draw(diffData, options);
}
 </script>

Комментарии:

1. Вы не можете изменить цвет старых данных. Я предлагаю сделать запрос функции , чтобы добавить поддержку для этого.

2. @asgallant это неправда. По крайней мере, больше нет. Я могу подтвердить, что приведенное ниже решение Bobs работает.

Ответ №1:

Вы можете установить это в объекте diff, например,

 var options = { ...
    diff: { 
        oldData: { opacity: 1, color: '#e6693e' }, 
        newData: { opacity: 1}
    }...
 }

Комментарии:

1. Я пытался установить цвет и непрозрачность. Похоже, это работает для круговых и точечных графиков, однако для гистограмм и столбчатых диаграмм «непрозрачность», похоже, что-то делает. Я прибегнул к использованию dataOpacity опции, расположенной в options.dataOpacity , чтобы установить непрозрачность для обоих oldData и newData

2. Для чего это стоит для исторической справки, я также нашел несколько интересных вещей, делая это совсем недавно. По какой-то причине наборы данных должны иметь имена oldData и newData, вы не можете выбрать любое имя, которое пожелаете. Если вы это сделаете, вы не сможете использовать параметр diff, поскольку он ожидает «oldData: и «newData». Цвет новых данных должен быть задан с помощью цветов в параметрах, и раскраска не выполняется в легенде.

3. Это полезно, но я не смог заставить легенду отражать новый цвет, который был изменен.

4. Есть ли какая-либо возможность изменить метку

5. @KevinBrown — можете ли вы расширить свой комментарий «Цвет новых данных должен быть задан с помощью цветов в параметрах» — я пытался заставить это работать

Метки: