Appcelerator中RGraph SVG图表点击事件无法触发问题求助

Problem Overview #

After updating RGraph in my Appcelerator Titanium project, the click event for my SVG pie chart has stopped working. Tooltips display correctly, the chart renders without issues, and the console logs "test 1" on load—but clicking the chart never triggers the Ti.API.info('test 2') call.

Environment:

• iPad 8 Simulator
• iOS 14
• Titanium SDK 9.2.2

Here's the code I'm using:

<head>
  <script src="rgraph/RGraph.svg.common.core.js"></script>
  <script src="rgraph/RGraph.svg.common.tooltips.js"></script>
  <script src="rgraph/RGraph.svg.pie.js"></script>
</head>
<body>
  <div style="width: 700px; height: 350px; border: 1px solid #ddd" id="chart-container">
  </div>
  <script>
    Ti.API.info('test 1 ');
  </script>
  <script>
    var torta = new RGraph.SVG.Pie({
      id: 'chart-container',
      data: [70,30],
      options: {
        labels: ['first', 'second'],
        tooltips: ['tool0','tool1'],
        shadow: true,
        exploded: [0,25],
        colors: ['red','yellow']
      }
    }).on('click', function (e, shape){
      Ti.API.info('test 2');
    });
    torta.roundRobin();
  </script>
</body>

Troubleshooting & Fixes #

Let's walk through potential solutions to get that click event firing again:

1. Switch to addEventListener Instead of Chainable .on()
   RGraph's SVG event handling can behave differently in embedded webviews like Titanium's. Try replacing the chainable .on() call with explicit event listener attachment:

   var torta = new RGraph.SVG.Pie({
     id: 'chart-container',
     data: [70,30],
     options: {
       labels: ['first', 'second'],
       tooltips: ['tool0','tool1'],
       shadow: true,
       exploded: [0,25],
       colors: ['red','yellow']
     }
   });
   
   // Use addEventListener for more reliable binding in Titanium
   torta.addEventListener('click', function (e, shape){
     Ti.API.info('test 2');
   });
   
   torta.roundRobin();
   

2. Ensure Pointer Events Are Enabled
   Titanium's webview might restrict pointer events by default. Add pointer-events: auto to your chart container and SVG elements to guarantee events are propagated:

   • Update the container div style:

     <div style="width: 700px; height: 350px; border: 1px solid #ddd; pointer-events: auto;" id="chart-container">
     </div>
     

   • Add a CSS rule to force pointer events on the generated SVG:

     <style>
       #chart-container svg {
         pointer-events: auto !important;
       }
     </style>
     

3. Check RGraph Version Compatibility
   The update might have introduced breaking changes for Titanium's webview. Try:

   • Reverting to your previous working RGraph version to confirm if the update caused the issue.
   • Scanning RGraph's release notes for any SVG event model changes between versions.

4. Isolate the Issue with Browser Testing
   Run your HTML/JS code in a desktop browser (Chrome/Safari) to see if the click event works there. If it does, the problem is specific to Titanium's webview:

   • Ensure your tiapp.xml allows JavaScript and inline scripts:

     <webview>
       <enable-javascript>true</enable-javascript>
       <allow-inline-scripts>true</allow-inline-scripts>
     </webview>
     

5. Debug Event Propagation
   Add a click listener directly to the container to check if events are reaching the DOM:

   document.getElementById('chart-container').addEventListener('click', function() {
     Ti.API.info('Container clicked!');
   });
   

   If this logs, the issue is with RGraph's event binding—not the webview blocking events.

6. Wait for DOM to Fully Load
   Ensure the chart container exists before initializing RGraph by wrapping your code in a DOMContentLoaded listener:

   document.addEventListener('DOMContentLoaded', function() {
     var torta = new RGraph.SVG.Pie({
       // Your options here
     });
     torta.addEventListener('click', function(e, shape) {
       Ti.API.info('test 2');
     });
     torta.roundRobin();
   });
   

Bonus: Debug with Webview Inspection #

Enable remote debugging for the iOS simulator to inspect the SVG elements directly. Check if the pie slices have click event listeners attached—this can help pinpoint if RGraph isn't binding the event correctly.

内容的提问来源于stack exchange，提问作者BorGhO