FusionMaps XT - VueJs - 不工作事件 connectorClick

Question

我有一张用 VueJS 处理过的地图，但事件 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: .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 模板中绑定事件对象。您的模板请参考以下代码：

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

FusionMaps XT - VueJs - 不工作事件 connectorClick

FusionMaps XT - VueJs - not work events connectorClick

javascript

fusioncharts

vue.js