将可编辑文本框添加到图表中的特定数据点

我正在尝试实现可编辑的文本框（在chartjs或fusion图表中的解决方案很好）。 尝试在使用触发器捕获数据点上的用户点击事件的fusioncharts中。 从fusionchart示例这里检查jsfiddle … [ dataPlotClick ] 1事件。 但是，目标是将外部文本框显示为模式forms或其他内容，记录用户注释，然后将它们存储在mysql数据库中。 最后，使用新注释更新工具提示以重新加载图表数据。 任何输入都有帮助。 以下是我所拥有的。

       FusionCharts.ready(function(){ var fusioncharts = new FusionCharts({ type: 'msline', renderAt: 'chart-container', width: '500', height: '300', dataFormat: 'json', dataSource: { "chart": { "paletteColors": "#0075c2,#1aaf5d", "bgcolor": "#ffffff", "showBorder": "0", "showShadow": "0", "showCanvasBorder": "0", "usePlotGradientColor": "0", "legendBorderAlpha": "0", "legendShadow": "0", "showAxisLines": "0", "showAlternateHGridColor": "0", "divlineThickness": "1", "divLineIsDashed": "1", "divLineDashLen": "1", "divLineGapLen": "1", "xAxisName": "Day", "showValues": "0" }, "categories": [{ "category": [{ "label": "1" }, { "label": "2" }, { "label": "3" }, { "label": "4" }] }], "dataset": [{ "seriesname": "Bakersfield Central", "data": [{ "value": "30", "toolText" : 'this value is 30' }, { "value": "25", "toolText" : 'below expectation', }, { "value": "30", "toolText" : 'this value expected' }, { "value": "35", "toolText" : 'exceeds' }] }], "trendlines": [{ "line": [{ "startvalue": "30", "color": "#6baa01", "valueOnRight": "1", "displayvalue": "Average" }] }]}, "events": { "dataPlotClick": function (eventObj, dataObj) { console.log(dataObj); var data_index = dataObj['dataIndex']; var tool_text = dataObj['toolText']; alert(data_index); alert(tool_text); } } }).render(); });    
FusionCharts XT will load here!
   

Answer 1

您可以使用getJSONData和setJSONData来获取和设置数据。 在每个dataPlotClick事件中，您首先获取整个数据。 追加/修改它，说出它的tooltext值，并使用setJSONData方法更新图表。 请参阅以下代码段或此小提琴 ：

 FusionCharts.ready(function() { var revenueChart = new FusionCharts({ type: 'column2d', renderAt: 'chart-container', width: '500', height: '350', dataFormat: 'json', dataSource: { "chart": { "caption": "Monthly revenue for last year", "subCaption": "Harry's SuperMart", "xAxisName": "Month", "yAxisName": "Revenue (In USD)", "numberPrefix": "$", "paletteColors": "#0075c2", "bgColor": "#ffffff", "borderAlpha": "20", "canvasBorderAlpha": "0", "usePlotGradientColor": "0", "plotBorderAlpha": "10", "placevaluesInside": "1", "rotatevalues": "1", "valueFontColor": "#ffffff", "showXAxisLine": "1", "xAxisLineColor": "#999999", "divlineColor": "#999999", "divLineIsDashed": "1", "showAlternateHGridColor": "0", "subcaptionFontBold": "0", "subcaptionFontSize": "14" }, "data": [{ "label": "Jan", "value": "420000" }, { "label": "Feb", "value": "810000" }, { "label": "Mar", "value": "720000" }, { "label": "Apr", "value": "550000" }, { "label": "May", "value": "910000" }, { "label": "Jun", "value": "510000" }, { "label": "Jul", "value": "680000" }, { "label": "Aug", "value": "620000" }, { "label": "Sep", "value": "610000" }, { "label": "Oct", "value": "490000" }, { "label": "Nov", "value": "900000" }, { "label": "Dec", "value": "730000" }] }, "events": { /** * @description * Triggered when a data plot is clicked. * * @param {Object} eventObj: An object containing all the details related to this event like eventId, sender, etc. * @param {Object} dataObj: An object containing all the details related to chart data, such as the chart ID, index and data value of the clicked data plot. */ "dataPlotClick": function(eventObj, dataObj) { var data_index = dataObj['dataIndex'], sender = eventObj.sender, JSONData = sender.getJSONData(); JSONData.data[data_index].toolText = prompt("Enter text here"); sender.setJSONData(JSONData); } } }).render(); }); 

 body { padding: 5px; margin: 0 auto; } #header { display: none; } #indicatorDiv { width: 500px; font-family: 'Arial', 'Helvetica'; font-size: 14px; } p { margin-top: 20px; margin-bottom: 20px; } #attrs-table { text-align: center; width: 500px; } .parameter-name, .parameter-value { width: 250px; font-weight: bold; text-align: center; float: left; } .title, .value { float: left; width: 230px; height: 20px; background: #fff; padding: 5px 10px; } .title { clear: left; } .title:nth-child(4n+1), .value:nth-child(4n+2) { background: rgb(0, 117, 194); color: #fff; } .value { word-wrap: break-word; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } 

   
Event name:  dataplotClick  
 
Triggered when a data plot is clicked. 
All events, when triggered, will provide two parameters for the handler -  eventObj  (object containing information generic to all events) and  dataObj  (object containing information specific to an event).br> Click any of the data plots to trigger the event. Scroll down to the table rendered below the chart to view information contained in the dataObj object. To view information contained in the eventObj object, open the console.  
 
FusionCharts will render here
 
 
 
 
Parameter Name
 
Parameter Value