Question

我正在使用Google Chart来绘制一些数据，我想自定义颜色。我也想使用3D栏（这意味着我不能使用核心库BTW）。

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

enter image description here

左边是原始的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

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

如果is3D = true，则这是HTML颜色或此类型的对象的数组：{color:face_color, darker:shade_color}其中颜色是元素的面部颜色，颜色是阴影颜色。但是，如果为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'}]
                  };

更改Google Chart中3D列的颜色

1 个答案: