Как применить цвет к фрагменту круговой диаграммы из API графиков Google

Привет, я пытаюсь применить цвет в срезах круговой диаграммы. Я использую API графиков Google.

Здесь вы получили всю информацию о круговой диаграмме: https://google-developers.appspot.com/chart/interactive/docs/gallery/piechart

И вот это ярлык о том, что я говорю:

срезы Массив объектов или объект с вложенными объектами {} Массив объектов, каждый из которых описывает формат соответствующего фрагмента в пирог. Чтобы использовать значения по умолчанию для среза, укажите пустой объект {}. Если срез или значение не указывается, будет использоваться глобальное значение. Каждый объект поддерживает следующие свойства:
Цвет
- цвет, используемый для этого фрагмента. Укажите допустимый цвет HTML строка. textStyle - переопределяет глобальный pieSliceTextSlice для этого кусочек. Вы можете указать либо массив объектов, каждый из которых применяется к срезу в указанном порядке или вы можете указать объект где каждый ребенок имеет числовой ключ, указывающий, какой срез он применяет к. Например, следующие два объявления идентичны, и объявите первый срез черным, а четвертый - красным:

slices: [{color: 'black', {}, {}, {color: 'red'}] slices: {0: {color: 'black'}, 3: {color: 'red'}}

Не знаю, где я должен поместить этот код, здесь детская площадка: https://code.google.com/apis/ajax/playground/?type=visualization#pie_chart

Это мой attemp (который не работает)

function drawVisualization() {
  // Create and populate the data table.
  var data = google.visualization.arrayToDataTable([
    ['Task', 'Hours per Day'],
    ['Work', 11],
    ['Eat', 2],
    ['Commute', 2],
    ['Watch TV', 2],
    ['Sleep', 7]
  ]);

  // Create and draw the visualization.
  new google.visualization.PieChart(document.getElementById('visualization')).
      draw(data, {title:"So, how was your day?", slices: [{color: 'black', {color: 'blue'}, {color: 'green'}, {color: 'red'}, {color: 'white'}]});
}

Спасибо за ваше время. ////////////////////////////////////////////////////////////////////////////////////////

EDIT:

<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Task', 'Hours per Day'],
          ['Work',     11],
          ['Eat',      2],
          ['Commute',  2],
          ['Watch TV', 2],
          ['Sleep',    7]
        ]);

        var options = {
          title: 'My Daily Activities',
          slices: {0: {color: '#006EFF'}, 1:{color: '#00FF08'}, 2:{color: 'blue'}, 3: {color: 'red'}, 4:{color: 'grey'}}
        };

        var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

Примечание. Я использовал

slices: {0: {color: '#006EFF'}, 1:{color: '#00FF08'}, 2:{color: 'blue'}, 3: {color: 'red'}, 4:{color: 'grey'}}

вместо

slices: [{color: 'black', {}, {}, {color: 'red'}]

Увидимся.

Ответ 1