如何将 HTML 添加到图表元素

Question

我正在尝试将服装 HTML 添加到我的 google 组织结构图中：

$scope.chartElements = [];
$scope.chart = {
    type: "OrgChart",
    data: {
        "cols": [
            {"label": "Name", "pattern": "<div class='text-danger'></div>", "type": "string"},
            {"label": "Manager", "pattern": "", "type": "string"},
        ],
        "rows": $scope.chartElements
    }
};

$http.get(api.getUrl('getMyFamilyTree', null))
    .success(function (response) {
        response.forEach(function (y) {
            $scope.divisionChartElement =
            {
                c: [{v: y.parent_id, f: '<div style="color:red; font-style:italic">President</div>'},
                    {v: y.child_id}
                ]
            };
            $scope.chartElements.push($scope.divisionChartElement);

        });

    });

然而遗憾的是当它出来时我得到以下信息：.

谁能帮帮我？

Fiddle: https://jsfiddle.net/umakk7az/

使用以下 api：https://github.com/bouil/angular-google-chart

Answer 1

我相信您必须将 allowHtml 添加到图表对象的选项属性中。

$scope.chartElements = [];
$scope.chart = {
    type: "OrgChart",
    data: {
        "cols": [
        {"label": "Name", "pattern": "<div class='text-danger'></div>", "type": "string"},
        {"label": "Manager", "pattern": "", "type": "string"},
        ],
        "rows": $scope.chartElements
    },
    options:{"allowHtml":true} //Add this attribute
};

$http.get(api.getUrl('getMyFamilyTree', null))
.success(function (response) {
    response.forEach(function (y) {
        $scope.divisionChartElement =
        {
            c: [{v: y.parent_id, f: '<div style="color:red; font-style:italic">President</div>'},
                {v: y.child_id}
            ]
        };
        $scope.chartElements.push($scope.divisionChartElement);

    });

});

如何将 HTML 添加到图表元素

How to add HTML to chart elements

javascript

google-visualization

angularjs