可编辑图表是一类可允许用户可视化管理数据的图表,客户通过对图表中的数据点进行拖拽,使该数据点的值改变,并且值改变后可以提交到服务器或者进行相关处理。
FusionCharts XT为开发人员提供了三种可编辑图表:2维柱状图、线性图以及区域图。客户可以对这三类图表进行可视化编辑以及拖拽等操作,下面的事例阐述了如何创建一个数据点可拖拽的2维柱状图:
{
"chart": {
"caption": "Please estimate revenues for 2014, 2015 and 2016",
"subcaption": "Drag the top edge of dashed columns to adjust data",
"bgcolor": "FFFFFF",
"numberprefix": "$",
"xaxisname": "Year",
"showvalues": "0",
"plotgradientcolor": "",
"showalternatehgridcolor": "0",
"showplotborder": "1",
"plotbordercolor": "666666",
"divlinecolor": "CCCCCC",
"canvasborderalpha": "0",
"showformbtn": "0"
},
"categories": [
{
"category": [
{
"label": "2012 (Actuals)"
},
{
"label": "2013 (Actuals)"
},
{
"label": "2014 (Predicted)"
},
{
"label": "2015 (Predicted)"
},
{
"label": "2016 (Predicted)"
}
]
}
],
"dataset": [
{
"id": "IJ",
"seriesname": "Products",
"color": "008ee4",
"data": [
{
"id": "IJ2012",
"value": "25601",
"allowdrag": "0"
},
{
"id": "IJ2013",
"value": "20148",
"allowdrag": "0"
},
{
"id": "IJ2014",
"value": "17372",
"dashed": "1"
},
{
"id": "IJ2015",
"value": "35407",
"dashed": "1"
},
{
"id": "IJ2016",
"value": "38105",
"dashed": "1"
}
]
},
{
"id": "LJ",
"seriesname": "Services",
"showvalues": "0",
"data": [
{
"id": "LJ2012",
"value": "57401",
"allowdrag": "0"
},
{
"id": "LJ2013",
"value": "41941",
"allowdrag": "0"
},
{
"id": "LJ2014",
"value": "45263",
"dashed": "1"
},
{
"id": "LJ2015",
"value": "117320",
"dashed": "1"
},
{
"id": "LJ2016",
"value": "114845",
"dashed": "1"
}
]
},
{
"id": "CR",
"seriesname": "Consulting",
"showvalues": "0",
"data": [
{
"id": "CR2012",
"value": "45000",
"allowdrag": "0"
},
{
"id": "CR2013",
"value": "44835",
"allowdrag": "0"
},
{
"id": "CR2014",
"value": "18722",
"dashed": "1"
},
{
"id": "CR2015",
"value": "77557",
"dashed": "1"
},
{
"id": "CR2016",
"value": "92633",
"dashed": "1"
}
]
}
]
}