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

How to add more href elements for each column in the chart with Javascript

本文关键字：一列 添加 元素 href Javascript 何用      更新时间：2023-09-26

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

请帮我纠正这个问题，使我的代码更短，当有不仅3个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]

简介:

在Plant 1:

问题出在这里:

  • 单击第一列(蓝色列)，出现一个新的选项卡http://google.com。
  • 点击第二列(红色列)，出现一个新的选项卡http://google.com。
  • 点击第三列(黄色列)，出现一个新的选项卡http://google.com。

必须是

  • 单击第一列(蓝色列)，出现一个新的选项卡http://google.com。
  • 点击第二列(红色列)，出现一个新的选项卡http://bing.com。
  • 点击第三列(黄色列)，出现一个新的选项卡http://alexa/com。

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

使用单个事件处理程序，并根据所选元素的列索引获取相关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');
    }
});
相关文章：