在Google Chart中更改3D列的颜色

Question

我正在使用谷歌图表图表一些数据，我想自定义颜色。我也想使用3D条(这意味着我不能使用核心库BTW)。

这是我得到的结果的截图：

​

​

左边是原始的3D图表，右边是定制的图表。正如您所看到的，没有对我为3D效果定义的颜色应用任何着色，而是对整个列使用平面颜色。

有没有办法解决这个问题？

PS。这是我用来生成图表的代码：

function drawChartCoste(){
        // Create the data table.
          var data = new google.visualization.DataTable();
          data.addColumn('string', 'Valor');
          data.addColumn('number', 'Grupo1');
          data.addColumn('number', 'Grupo2');
          data.addRow(['Consumo', 2.5, -17.860);


          // Set chart options
          var options = {'title':'Comparativa de coste',
                         'width':400,
                         'height':300,
                         'is3D':true,
                         'colors':['#C26900','#165C04']};

          // Instantiate and draw our chart, passing in some options.
          var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
          chart.draw(data, options);
      }

Answer 1

虽然我坚定地重申了我对3d图表的反对，但这似乎是可行的from this line in the Docs

如果为is3D=true，则这是一个由{color:face_color, darker:shade_color}颜色或此类型的对象组成的数组，其中color是元素的表面颜色，darker是阴影颜色。但是，如果为3D对象指定HTML颜色，则面和阴影将是相同的颜色，3D效果将会降低。示例：{is3D:true, colors:[{color:'#FF0000', darker:'#680000'}, {color:'cyan', darker:'deepskyblue'}]}

下面是一个示例：

    // Set chart options
    var options = {'title':'Comparativa de coste',
                   'width':400,
                   'height':300,
                   is3D:true,
                   colors:[{color:'#C26900', darker:'#B15800'}, {color:'#165C04', darker:'#054B00'}]
                  };