1

我正在使用 Google Chart 来绘制一些数据，并且我想自定义颜色。我也想使用 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);
      }
4

1 回答 1

2

虽然我坚决重申我对 3d 图表的反对意见，但从 Docs 中的这一行看来这是可行的：

如果 is3D=true，这是一个 HTML 颜色数组，或者这个类型的对象：{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'}]
                  };
于 2013-04-25T07:17:20.793 回答