javascript - 如何将 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);

        });

    });

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

谁能帮帮我吗？

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

    });

});