如何将HTML添加到图表元素

Question

我正在尝试将costum 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);

        });

    });

然而，不幸的是，当它出现时，我得到以下内容：。

任何人都可以帮助我吗？

小提琴：https://jsfiddle.net/umakk7az/

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

Answer 1

我相信你必须将allowHtml包含在图表对象的options属性中。

$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);

    });

});