的总结：

Question

我在这里做的是为每列添加一个链接，但它仅适用于第一个 link1列。

请帮助我纠正此问题，并在每个links 不仅Plant 时强调我的代码。

    ['Year', 'link1', 'Dollars', 'link2', 'Conts', 'link3', 'Quantity'],
    ['Plant 1', 'http://google.com', 1000, 'http://bing.com', 400, 'http://alexa/com', 2000],
    ['Tan Thanh', 'http://dell.com', 1170, 'http://lenovo.com', 460, 'http://hp.com', 1420],
    ['Plant 3', 'http://w3schools.com', 660, 'http://microsoft.com', 1120, 'http://adobe.com', 1080],
    ['Plant 4', 'http://apple.com', 1030, 'http://htc.com', 540, 'http://samsung.com', 2240]

的总结：

在工厂1中：

问题出在这里：

单击第一列（蓝色列），出现一个新选项卡 http://google.com。
单击第二列（红色列），将出现一个新选项卡 http://google.com。
单击第三列（黄色列），出现一个新选项卡 http://google.com。

一定是：

单击第一列（蓝色列），出现一个新选项卡 http://google.com。
单击第二列（红色列），将出现一个新选项卡 http://bing.com。
单击第三列（黄色列），出现一个新选项卡 http://alexa/com。

的 Demo

HTML：

<div id="chart_div" style="width: 550px; height: 500px;"></div>

使用Javascript：

google.load("visualization", "1", {
    packages: ["corechart"]
});
google.setOnLoadCallback(drawChart);

function drawChart() {
    var data = google.visualization.arrayToDataTable([
        ['Year', 'link1', 'Dollars', 'link2', 'Conts', 'link3', 'Quantity'],
        ['Plant 1', 'http://google.com', 1000, 'http://bing.com', 400, 'http://alexa/com', 2000],
        ['Tan Thanh', 'http://dell.com', 1170, 'http://lenovo.com', 460, 'http://hp.com', 1420],
        ['Plant 3', 'http://w3schools.com', 660, 'http://microsoft.com', 1120, 'http://adobe.com', 1080],
        ['Plant 4', 'http://apple.com', 1030, 'http://htc.com', 540, 'http://samsung.com', 2240]
    ]);

    var view = new google.visualization.DataView(data);
    view.setColumns([0, 2, 4, 6]);

    var options = {
        title: 'Company Performance'
    };

    var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));

    chart.draw(view, options);
    function selectHandler1() {
        window.open(data.getValue(chart.getSelection()[0]['row'], 1), '_blank');
    }

    function selectHandler2() {
        window.open(data.getValue(chart.getSelection()[0]['row'], 3), '_blank');
    }

    function selectHandler3() {
        window.open(data.getValue(chart.getSelection()[0]['row'], 5), '_blank');
    }
    // Add our selection handler.
    google.visualization.events.addListener(chart, 'select', selectHandler1);
    google.visualization.events.addListener(chart, 'select', selectHandler2);
    google.visualization.events.addListener(chart, 'select', selectHandler3);
}

Answer 1

使用单个事件处理程序，并根据所选元素的列索引获取相关URL：

google.visualization.events.addListener(chart, 'select', function () {
    var selection = chart.getSelection();
    // test selection array length, since it can be 0 if the user deselects an element
    if (selection.length) {
        var row = selection[0].row;
        // convert the view column index to the table column index,
        // then subtract 1 to get the URL index
        var urlCol = view.getTableColumnIndex(selection[0].column) - 1;
        window.open(data.getValue(row, urlCol), '_blank');
    }
});

如何使用Javascript为图表中的每列添加更多href元素

的总结：

的 Demo

1 个答案: