如何在ng-google-chart中添加柱状图和条形图的3D效果？

Question

我正在使用ng-google-chart.js创建图表

这是我的html代码。

<div google-chart  chart="colChartObject"</div>

在js中，我这样写道：

            $scope.colChartObject = {};

            $scope.colChartObject.type = "ColumnChart";

            $scope.colChartObject.data = $scope.data;

            $scope.colChartObject.options = {
                title: $scope.title,
                isStacked: false,
                titleTextStyle: { color: '#000000', fontName: 'Open Sans', fontSize: 16, bold: true, italic: false },
                height: 250,
                is3D:true,
                colors: [{ color: '#FF0000', darker: '#680000' }, { color: 'cyan', darker: 'deepskyblue' }]
            };

其中$scope.data的定义如下

        $scope.data = {

        "cols": [
            {
                "id": "level0-id",
                "label": "level0",
                "type": "string"
            },
            {
                "id": "level1-id",
                "label": "level1",
                "type": "number"
            },
            {
                "id": "level2-id",
                "label": "level2",
                "type": "number"
            }
        ],
        "rows": [
            {
                "c": [
                    {
                        "v": "1-2 DAYS"
                    },
                    {
                        "v": 42,
                        "f": "42 items level 1"
                    },
                    {
                        "v": 67,
                        "f": "67 items level 2"
                    }
                ]
            },
            {
                "c": [
                    {
                        "v": "3-5 DAYS"
                    },
                    {
                        "v": 68,
                        "f": "63 items level 1"
                    },
                    {
                        "v": 89,
                        "f": "89 items level 2"
                    }
                ]
            },
            {
                "c": [
                    {
                        "v": "6+ DAYS"
                    },
                    {
                        "v": 57,
                        "f": "57 items level 1"
                    },
                    {
                        "v": 123,
                        "f": "123 items level 2"
                    }
                ]
            }
        ]
    }

在$scope.colChartObject.options中，我提到了is3D:true

    $scope.colChartObject.options{
         is3D:true
         }

但在输出图表上没有3D效果。

如何在图表上添加3D效果？

​

如果我使用

    $scope.colChartObject.type = "PieChart"; 

和

    is3D:true

然后我在图上得到了3d效果。

​

但是为什么'ColumnChart‘和'BarChart’没有3D效果呢？

我想要这样的o/p

​

我可以更改数据、颜色等。我有兴趣知道如何添加3D效果。谢谢

Answer 1

谷歌的饼图是唯一支持--> is3D的饼图

您可以检查每种图表类型的configuration options，以了解支持哪些选项...