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

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

<html> 
<head> 
<title>My first chart using FusionCharts Suite XT</title> 
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script> 
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script> 
<script type="text/javascript"> 
    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(); 
}); 
</script> 
</head> 
<body> 
    <div id="chart-container">FusionCharts XT will load here!</div> 
</body> 
</html>

来源

2016-12-16 user5249203

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

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; 
 
}

<script src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script> 
 
<!-- This sample shows the event parameters, and their values, when dataplotClick event is triggered--> 
 
<div id="indicatorDiv">Event name: <b> dataplotClick </b> 
 
    <br> 
 
    <br>Triggered when a data plot is clicked.</br> 
 
    <br>All events, when triggered, will provide two parameters for the handler - <b> eventObj </b> (object containing information generic to all events) and <b> dataObj </b> (object containing information specific to an event).</br>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.</br> 
 
    </br> 
 
</div> 
 
<div id="chart-container">FusionCharts will render here</div> 
 
<div> 
 
    <div> 
 
    <div id="header"> 
 
     <div class="parameter-name">Parameter Name</div> 
 
     <div class="parameter-value">Parameter Value</div> 
 
    </div> 
 
    <div id="attrs-table"></div> 
 
    </div> 
 
</div>

所以你看，这里单击列，一个提示框打开（如示例代码有人说）你输入的内容提示转到该索引列的工具文本。您可以执行其他操作，例如录制新用户注释或将其保存在数据库中。

来源

2016-12-17 05:21:26 Ayan

嗨阿彦，谢谢他们的解决方案。但是，我尝试了提示，并没有发现它很有用。像文本框这样的文本区域是我正在寻找的......调用一个div，打开一个文本框并捕获这些值并将其保存回数据库。 – user5249203

是的，你可以在你的事件回调中做到这一点。尝试引导模式。我认为他们会符合你的要求。（http://www.w3schools.com/bootstrap/bootstrap_ref_js_modal.asp）。 – Ayan

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

回答

相关问题