javascript - FusionMaps XT - VueJs - 不工作事件connectorClick

Question

我有一个使用 VueJS 处理的 map ，但我在事件connectorClick 方面遇到问题。在下面的示例中，当单击连接线时，警报不起作用。

Vue.use(VueFusionCharts, FusionCharts);
let grphMap = new Vue ({
	el: '#app-vue',
  data: {
    	type: "maps/romania",
    	width: "800",
    	height: "600",
    	dataFormat: "json",
    	dataSource: {
    		'chart': {
      		"theme":                "fusion",
      		"nullEntityColor":      "#E5E5E9",
      		"entityFillHoverColor": "#99ccff",
      		"showLabels":           '1',
      		"showEntityHoverEffect": "1",
      		"showtooltip":          "1",
      		"connectorColor":       "#0CB2B0",
      		"connectorHoverColor": "#000000",
      		"connectorthickness":   "3",
      		"markerfontsize":       "18",
      		"markerfontcolor":      "#0a0a0a",
			"numbersuffix":         "%",
      		"entityFillColor":      "#ff0000",
      		"markerBgColor":        "#FF0000",
      		"markerRadius":         "12",
      },
      	"colorrange": {
          "gradient": "0",
      },
      	"data": [
          {
          	id: '10',
            color: "#74CCEB",
          }
      ],
      	"markers": {
          "shapes": [
      		    {
               "id": "myCustomShape",
               "type": "circle",
               "fillcolor": "#f8bd19",
               "showborder": "0"
              }
          ],
          "items": [
              {
                shapeid: "myCustomShape",
                id: "10",
                x: "295.5",
                y: "283.5",
              },
              {
                shapeid: "myCustomShape",
                id: "11",
                x: "323.9",
                y: "226.6",
              }
          ],
          "connectors": [
              {
                "from": "10",
                "to": "11",
                "showtooltip": "1",
                "color": "#F4191F",
                "tooltext": "<b>Shipping Details:</b>{br}Daily shipment: $label Units{br}Average shipping cost: $1.2"
              }
          ]
       }
    	},
    	events: {
      	"connectorClick": function() {
        	 alert("Test alert!");
      	}
    	}
    }
});

    <script type="text/javascript" src="https://unpkg.com/vue@2.3.3"></script>
    <script type="text/javascript" src="https://unpkg.com/vue-fusioncharts/dist/vue-fusioncharts.min.js"></script>
    <script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
    <script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.maps.js"></script>
    <script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.romania.js"></script>
    <script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>
<div id="app-vue">
      <fusioncharts
      :type="type"
      :width="width"
      :height="height"
      :dataFormat="dataFormat"
      :dataSource="dataSource"
     ></fusioncharts>
  </div>

https://jsfiddle.net/Hexman/5e61pu3r/25

我找到了一个功能示例，但它不在 VueJs 中 http://jsfiddle.net/fusioncharts/t226vxnp/

不要给我错误所在的马鞍吗？

Answer 1

似乎您忘记了在组件数据中定义的 fusioncharts 模板中绑定(bind)事件对象。请引用以下代码作为您的模板:

<fusioncharts
  :type="type"
  :width="width"
  :height="height"
  :dataFormat="dataFormat"
  :dataSource="dataSource"
  :events="events" // Bind your events object
></fusioncharts>