2

我在网站中使用谷歌图表，并希望将列名变成链接而不是字符串。

但是当我将标签放入图表时，它会将它们显示为字符串。我已经设置了 {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>
4

2 回答 2

0

您使用了错误的引号和斜杠格式。您必须使用 \" 和 / 代替。

    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]
        ]);
于 2013-10-10T14:08:25.707 回答
0

对此的解决方案是在图表上使用“点击”事件处理程序，并解析 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/

于 2013-10-10T15:10:07.770 回答