将可编辑文本框添加到图表中的特定数据点 [英] add editable textbox to specific datapoint in a chart
问题描述
我正在尝试实现可编辑的文本框（图表或融合图表中的解决方案很好）。尝试使用触发器在数据点上捕获用户点击事件的融合图。从这里的fusionchart示例中查看jsfiddle ... [ dataPlotClick ] 1 事件。但是，目标是将外部文本框显示为模态形式或其他内容，记录用户注释，然后将它们存储在mysql数据库中。最后，使用新注释更新工具提示以重新加载图表数据。任何输入都有帮助。以下是我的内容。
I am trying to implement editable textbox ( solution in either chartjs or fusion charts is fine). Tried a bit in fusioncharts capturing user click event on a data point using trigger. Check the jsfiddle from fusionchart example here... [dataPlotClick]1event. However, the goal is to show an external text box as modal form or something else, record user comments and then store them in mysql database. Finally, update tooltip with new comments to re-load chart data. Any inputs are helpful. Below is what I have.
<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>
推荐答案
您可以使用getJSONData和setJSONData来获取和设置你的数据。在每个dataPlotClick事件中，您首先获取整个数据。追加/修改它，说出它的tooltext值，并使用setJSONData方法更新图表。
请参阅以下代码段或此小提琴：
You can use the getJSONData and the setJSONData to get and set your data. On every dataPlotClick event, you first fetch the entire data. Append/ Modify it, say the tooltext value for it and update the chart using the setJSONData method. Refer to this following snippet or this 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>
所以你看到，在单击列时，会打开一个提示框（如示例代码中所述），您在提示中输入的内容将转到该索引列的工具文本。您可以执行其他操作，例如记录新用户注释或将其保存在数据库中。
So you see, here on clicking a column, a prompt box opens(as was said in your sample code) What you enter in the prompt goes to the tooltext of that indexed column. You can do other operations such as recording new user comments or saving them in database.
这篇关于将可编辑文本框添加到图表中的特定数据点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
