Question

我在网站上使用谷歌图表，并希望将列名称设为链接而不是字符串。

但是当我将标签放入图表时，它会将它们显示为字符串。我设置了{allowHtml：true}，但仍然没有运气。

它将列名称显示为<a href="http://www.w3schools.com">Visit W3Schools</a>而不是Visit W3Schools，并且是字符串而不是链接。我使用的代码如下：

<script type="text/javascript">
    function drawVisualization() {
        // Create and populate the data table.
        var data = google.visualization.arrayToDataTable([
              ['Job State',  'Job Numbers'],
              ['<a href="http://www.w3schools.com">Visit W3Schools</a>',   @Model.jobCount],
              ['<a href="http://www.w3schools.com">Visit W3Schools</a>',   @Model.liveJobCount],
              ['<a href="http://www.w3schools.com">Visit W3Schools</a>',   @Model.draftJobCount],
              ['<a href="http://www.w3schools.com">Visit W3Schools</a>',  @Model.closedJobCount]
            ]);

        // Create and draw the visualization.
        new google.visualization.ColumnChart(document.getElementById('visualization')).
            draw(data,{allowHtml:true},
            {title:"Current Jobs Statuses",
            width:600, height:400,
            hAxis: {title: "Job Type"}}
        );

    }


    google.setOnLoadCallback(drawVisualization);
</script>

Answer 1

您使用了错误的引号格式和斜杠。你必须使用\“和/而不是。

    var data = google.visualization.arrayToDataTable([
          ['Job State',  'Job Numbers'],
          ['<a href=\"http:\/\/www.w3schools.com\">Visit W3Schools<\/a>',   @Model.jobCount],
          ['<a href=\"http:\/\/www.w3schools.com\">Visit W3Schools<\/a>',   @Model.liveJobCount],
          ['<a href=\"http:\/\/www.w3schools.com\">Visit W3Schools<\/a>',   @Model.draftJobCount],
          ['<a href=\"http:\/\/www.w3schools.com\">Visit W3Schools<\/a>',  @Model.closedJobCount]
        ]);

Answer 2

解决方法是在图表上使用“click”事件处理程序，并解析targetID的事件信息，以过滤除轴标签上的所有点击之外的所有点击：

google.visualization.events.addListener(chart, 'click', function (e) {
    // match the targetID of the clicked element to an hAxis label
    // and capture the index of the label if matched
    var match = e.targetID.match(/hAxis#\d+#label#(\d+)/);
    if (match) {
        var rowIndex = parseInt(match[1]);
        var axisLabel = data.getValue(rowIndex, 0);
        // do something with the rowIndex and/or axisLabel
    }
});

这是一个jsfiddle，您可以使用示例代码来测试它：http://jsfiddle.net/asgallant/fwGmS/

使用谷歌可视化将html标签放入谷歌图表

2 个答案: