将可编辑的文本框添加到图表中的特定数据点
我正在尝试实现可编辑的文本框(chartjs 或融合图表中的解决方案都可以).在 fusioncharts 中尝试使用触发器捕获数据点上的用户点击事件.在此处检查 fusionchart 示例中的 jsfiddle... [dataPlotClick]1事件.但是，目标是将外部文本框显示为模态形式或其他形式，记录用户评论，然后将它们存储在 mysql 数据库中.最后，使用新评论更新工具提示以重新加载图表数据.任何输入都是有帮助的.以下是我所拥有的.
<html><头><title>我使用 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><脚本类型="文本/javascript">FusionCharts.ready(function(){var fusioncharts = 新的 FusionCharts({类型:'msline'，renderAt: '图表容器',宽度:'500'，高度:'300'，数据格式:'json'，数据源: {图表": {"paletteColors": "#0075c2,#1aaf5d","bgcolor": "#ffffff","showBorder": "0","showShadow": "0","showCanvasBorder": "0","usePlotGradientColor": "0","legendBorderAlpha": "0",传奇阴影":0"，"showAxisLines": "0","showAlternateHGridColor": "0","divlineThickness": "1","divLineIsDashed": "1","divLineDashLen": "1","divLineGapLen": "1","xAxisName": "天",显示值":0"},类别":[{类别": [{标签":1"}, {标签":2"}, {标签":3"}, {标签":4"}]}],数据集":[{系列名称":贝克斯菲尔德中心"，数据": [{价值":30"，"toolText" : '这个值为 30'}, {价值":25"，"toolText" : '低于预期',}, {价值":30"，"toolText" : '这个值是预期的'}, {价值":35"，工具文本":超过"}]}],趋势线":[{线": [{起始值":30"，"颜色": "#6baa01","valueOnRight": "1",显示值":平均"}]}]},事件":{"dataPlotClick": 函数 (eventObj, dataObj) {控制台.log(dataObj);var data_index = dataObj['dataIndex'];var tool_text = dataObj['toolText'];警报(数据索引)；警报(工具文本)；}}}).使成为();});</脚本></头><身体><div id="chart-container">FusionCharts XT 将在此处加载！</div></身体></html>您可以使用 getJSONData 和 setJSONData 来获取和设置您的数据.在每个 dataPlotClick 事件中，您首先获取整个数据.追加/修改它，说出它的工具文本值并使用 setJSONData 方法更新图表.请参阅以下片段或此 fiddle:
FusionCharts.ready(function() {var 收入图表 = 新的 FusionCharts({类型:'column2d'，renderAt: '图表容器',宽度:'500'，高度:'350'，数据格式:'json'，数据源: {图表": {"caption": "去年的月收入","subCaption": "Harry's SuperMart","xAxisName": "月","yAxisName": "收入(美元)","数字前缀": "$","调色板颜色": "#0075c2","bgColor": "#ffffff","borderAlpha": "20","canvasBorderAlpha": "0","usePlotGradientColor": "0","plotBorderAlpha": "10",placevaluesInside":1"，旋转值":1"，"valueFontColor": "#ffffff","showXAxisLine": "1","xAxisLineColor": "#999999","divlineColor": "#999999","divLineIsDashed": "1","showAlternateHGridColor": "0","subcaptionFontBold": "0","subcaptionFontSize": "14"},数据": [{标签":一月"，价值":420000"}, {标签":二月"，价值":810000"}, {标签":三月"，价值":720000"}, {标签":四月"，价值":550000"}, {标签":五月"，价值":910000"}, {标签":君"，价值":510000"}, {标签":七月"，价值":680000"}, {标签":八月"，价值":620000"}, {标签":九月"，价值":610000"}, {标签":十月"，价值":490000"}, {标签":十一月"，价值":900000"}, {标签":十二月"，价值":730000"}]},事件":{/*** @描述* 单击数据图时触发.** @param {Object} eventObj:一个对象，包含与此事件相关的所有详细信息，如 eventId、sender 等.* @param {Object} dataObj:一个对象，包含所有与图表数据相关的细节，例如点击数据图的图表ID、索引和数据值.*/dataPlotClick":函数(eventObj，dataObj){var data_index = dataObj['dataIndex'],发件人 = eventObj.sender,JSONData = sender.getJSONData();JSONData.data[data_index].toolText = prompt("在此输入文本");sender.setJSONData(JSONData);}}}).使成为();});body {填充:5px；边距:0 自动；}#标题{显示:无；}#indicatorDiv {宽度:500px；字体系列:'Arial'，'Helvetica'；字体大小:14px；}p {边距顶部:20px；边距底部:20px；}#attrs 表 {文本对齐:居中；宽度:500px；}.参数名称，.参数值{宽度:250px；字体粗细:粗体；文本对齐:居中；向左飘浮;}.标题，.价值 {向左飘浮;宽度:230px；高度:20px；背景:#fff;填充:5px 10px；}.标题 {清除:左；}.title:nth-child(4n+1),.value:nth-child(4n+2) {背景:RGB(0、117、194)；颜色:#fff;}.价值 {word-wrap:断词；溢出:隐藏；空白:nowrap；文本溢出:省略号；}<script src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></脚本><!-- 此示例显示触发 dataplotClick 事件时的事件参数及其值--><div id="indicatorDiv">事件名称:<b>数据图点击 </b><br><br>点击数据图时触发.</br><br>所有事件，当被触发时，将为处理程序提供两个参数 - <b>事件对象 </b>(包含所有事件通用信息的对象)和 <b>数据对象 </b>(包含特定于事件的信息的对象).</br>br>单击任何数据图触发事件.向下滚动到图表下方呈现的表格以查看 dataObj 对象中包含的信息.要查看 eventObj 对象中包含的信息，请打开控制台.</br></br></div><div id="chart-container">FusionCharts 将在此处呈现</div><div id="标题"><div class="parameter-name">参数名称</div><div class="parameter-value">参数值</div></div><div id="attrs-table"></div></div></div>因此，您会看到，在此处单击列时，会打开一个提示框(如您的示例代码中所述)您在提示中输入的内容将转到该索引列的工具文本.您可以进行其他操作，例如记录新用户评论或将其保存在数据库中.
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>
解决方案
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.
相关文章