Amcharts图表 - 图表列的超链接到要在新标签/窗口中打开的自定义URL

Question

我正在尝试使用链接到自定义网址的列创建一个amcharts图表，并希望在新的标签/窗口中打开网址。我尝试将此代码添加到图形对象但它不起作用，它在同一个选项卡/窗口中打开链接 -

"listeners": [{
      "event": "clickItem",
      "method": function(event) {
window.open(event.serialDataItem.dataContext.url, '_blank');
      }
    }],

请告诉我做错了什么。我不想使用Jquery，我是javascript的新手。

这是我的代码段 -

var chart = AmCharts.makeChart("chartdiv", {
  "type": "serial",
  "theme": "light",
  "dataProvider": [{
    "country": "USA",
    "visits": 2025,
    "url": "https://en.wikipedia.org/wiki/United_States"
  }, {
    "country": "China",
    "visits": 1882,
    "url": "https://en.wikipedia.org/wiki/China"
  }, {
    "country": "Japan",
    "visits": 1809,
    "url": "https://en.wikipedia.org/wiki/Japan"
  }, {
    "country": "Germany",
    "visits": 1322,
    "url": "https://en.wikipedia.org/wiki/Germany"
  }, {
    "country": "France",
    "visits": 1114,
    "url": "https://en.wikipedia.org/wiki/France"
  }, {
    "country": "India",
    "visits": 984,
    "url": "https://en.wikipedia.org/wiki/India"
  }, {
    "country": "Spain",
    "visits": 711,
    "url": "https://en.wikipedia.org/wiki/Spain"
  }],
  "valueAxes": [{
    "gridColor": "#FFFFFF",
    "gridAlpha": 0.2,
    "dashLength": 0
  }],
  "gridAboveGraphs": true,
  "startDuration": 1,
  "graphs": [{
    "balloonText": "[[category]]: <b>[[value]]</b>",
    "fillAlphas": 0.8,
    "lineAlpha": 0.2,
    "type": "column",
    "valueField": "visits",
    "listeners": [{
      "event": "clickItem",
      "method": function(event) {
window.open(event.serialDataItem.dataContext.url, '_blank');
      }
    }],
    "urlField": "url"
  }],
  "chartCursor": {
    "categoryBalloonEnabled": false,
    "cursorAlpha": 0,
    "zoomable": false
  },
  "categoryField": "country",
  "categoryAxis": {
    "gridPosition": "start",
    "gridAlpha": 0,
    "tickPosition": "start",
    "tickLength": 20
  }
});

html, body {
  width: 100%;
  height: 100%;
  margin: 0px;
}

#chartdiv {
	width: 100%;
	height: 100%;
}

<script src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script src="//www.amcharts.com/lib/3/serial.js"></script>
<script src="//www.amcharts.com/lib/3/themes/light.js"></script>

<div id="chartdiv"></div>

Answer 1

您可以使用urlTarget，例如：

import java.awt.BorderLayout;
import java.awt.Color;
import java.awt.Dimension;
import java.awt.Image;
import javax.imageio.ImageIO;
import javax.swing.Box;
import javax.swing.BoxLayout;
import javax.swing.Icon;
import javax.swing.ImageIcon;
import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.SwingUtilities;
import javax.swing.WindowConstants;

public class Test extends JPanel {

    public static void main(String[] args) {
        SwingUtilities.invokeLater(new Runnable() {
            public void run() {
                constructGUI();
            }
        });
    }

    private static void constructGUI() {
        JFrame frame = new JFrame("Testy");
        frame.setDefaultCloseOperation(WindowConstants.EXIT_ON_CLOSE);

        JPanel centerPanel = new JPanel();
        centerPanel.setBackground(Color.DARK_GRAY);
        centerPanel.setPreferredSize(new Dimension(100, 400));
        frame.add(centerPanel, BorderLayout.CENTER);

        Test eastPanel = new Test();
        frame.add(eastPanel, BorderLayout.EAST);

        frame.pack();
        frame.setVisible(true);
    }

    public Test() {

        setLayout(new BoxLayout(this, BoxLayout.PAGE_AXIS));
        Dimension d = new Dimension(50, 50);

        JButton button1 = new JButton("");
        button1.setPreferredSize(d);

        button1.setIcon(new ImageIcon(this.getClass().getResource("/Pictures/ellipse.png")));

        button1.setMaximumSize(new Dimension(Integer.MAX_VALUE, button1.getMinimumSize().height));
        add(button1);

        JButton button2 = new JButton("");
        button2.setPreferredSize(d);

        button2.setIcon(new ImageIcon(this.getClass().getResource("/Pictures/ellipse.png")));

        button2.setMaximumSize(new Dimension(Integer.MAX_VALUE, button2.getMinimumSize().height));
        add(button2);

        JButton button3 = new JButton("");
        button3.setPreferredSize(d);

        button3.setIcon(new ImageIcon(this.getClass().getResource("/Pictures/ellipse.png")));

        button3.setMaximumSize(new Dimension(Integer.MAX_VALUE, button3.getMinimumSize().height));
        add(button3);

        add(Box.createVerticalGlue());

    }

}

Answer 2

更改

"listeners": [{
      "event": "clickItem",
      "method": function(event) {
window.open(event.serialDataItem.dataContext.url, '_blank');
      }
    }],

到

listeners:[{
  event:'clickItem',
  method:function(event){
    open(event.item.url, '_blank');
  }
}]