</pre>工作中需要画曲线，于是选用了由 立陶宛一个公司很出名的一个组件：amchart不过<p></p><p>1.该组件不是开源免费的，</p><p>2.而且几乎没有中文文档，</p><p>3.业务上有一些需求满足不了</p><p>基于以上三个原因，我不把amchart自己对着他的压缩文件，研究的半天</p><p>达到的效果，</p><p>1.首先把他的logo链接去掉【也算是破解了吧】</p><p>2.根据自己的业务需求实现了逻辑</p><p>废话到此为止</p><p>直接上图:</p><p>步骤1.组装数据：他要求的数据结构是下图这样一种结构</p><p>也就是</p><p> [{横坐标1，纵坐标1，纵坐标2，纵坐标3，纵坐标4，。。。},</p><p>{横坐标2，纵坐标1，纵坐标2，纵坐标3，纵坐标4，。。。},</p><p>{横坐标3，纵坐标1，纵坐标2，纵坐标3，纵坐标4，。。。},</p><p>.......</p><p>]</p><p>于是我的从后台封装了这样的数据；</p><p>[{month:0,p3:46.3,p15:47.9,p50:49.9,p85:51.8,p97:53.4,user:40.0},{month:1,p3:51.1,p15:52.7,p50:54.7,p85:56.7,p97:58.4,user:49.0},{month:2,p3:54.7,p15:56.4,p50:58.4,p85:60.5,p97:62.2,user:57.0},{month:3,p3:57.6,p15:59.3,p50:61.4,p85:63.5,p97:65.3,user:40.0},{month:4,p3:60.0,p15:61.7,p50:63.9,p85:66.0,p97:67.8,user:61.0},{month:5,p3:61.9,p15:63.7,p50:65.9,p85:68.1,p97:69.9,user:63.5},{month:6,p3:63.6,p15:65.4,p50:67.6,p85:69.8,p97:71.6,user:66.0},{month:7,p3:65.1,p15:66.9,p50:69.2,p85:71.4,p97:73.2,user:69.0},{month:8,p3:66.5,p15:68.3,p50:70.6,p85:72.9,p97:74.7,user:40.0},{month:9,p3:67.7,p15:69.6,p50:72.0,p85:74.3,p97:76.2,user:71.0},{month:10,p3:69.0,p15:70.9,p50:73.3,p85:75.6,p97:77.6,user:40.0},{month:11,p3:70.2,p15:72.1,p50:74.5,p85:77.0,p97:78.9,user:40.0},{month:12,p3:71.3,p15:73.3,p50:75.7,p85:78.2,p97:80.2,user:40.0},{month:13,p3:72.4,p15:74.4,p50:76.9,p85:79.4,p97:81.5,user:40.0},{month:14,p3:73.4,p15:75.5,p50:78.0,p85:80.6,p97:82.7,user:40.0},{month:15,p3:74.4,p15:76.5,p50:79.1,p85:81.8,p97:83.9,user:40.0},{month:16,p3:75.4,p15:77.5,p50:80.2,p85:82.9,p97:85.1,user:40.0},{month:17,p3:76.3,p15:78.5,p50:81.2,p85:84.0,p97:86.2,user:40.0},{month:18,p3:77.2,p15:79.5,p50:82.3,p85:85.1,p97:87.3,user:40.0},{month:19,p3:78.1,p15:80.4,p50:83.2,p85:86.1,p97:88.4,user:40.0},{month:20,p3:78.9,p15:81.3,p50:84.2,p85:87.1,p97:89.5,user:40.0},{month:21,p3:79.7,p15:82.2,p50:85.1,p85:88.1,p97:90.5,user:40.0},{month:22,p3:80.5,p15:83.0,p50:86.0,p85:89.1,p97:91.6,user:40.0},{month:23,p3:81.3,p15:83.8,p50:86.9,p85:90.0,p97:92.6,user:40.0},{month:24,p3:82.1,p15:84.6,p50:87.8,p85:91.0,p97:93.6,user:40.0},{month:25,p3:82.1,p15:84.7,p50:88.0,p85:91.2,p97:93.8,user:40.0},{month:26,p3:82.8,p15:85.5,p50:88.8,p85:92.1,p97:94.8,user:40.0},{month:27,p3:83.5,p15:86.3,p50:89.6,p85:93.0,p97:95.7,user:40.0},{month:28,p3:84.2,p15:87.0,p50:90.4,p85:93.8,p97:96.6,user:40.0},{month:29,p3:84.9,p15:87.7,p50:91.2,p85:94.7,p97:97.5,user:40.0},{month:30,p3:85.5,p15:88.4,p50:91.9,p85:95.5,p97:98.3,user:40.0},{month:31,p3:86.2,p15:89.1,p50:92.7,p85:96.2,p97:99.2,user:40.0},{month:32,p3:86.8,p15:89.7,p50:93.4,p85:97.0,p97:100.0,user:40.0},{month:33,p3:87.4,p15:90.4,p50:94.1,p85:97.8,p97:100.8,user:40.0},{month:34,p3:88.0,p15:91.0,p50:94.8,p85:98.5,p97:101.5,user:40.0},{month:35,p3:88.5,p15:91.6,p50:95.4,p85:99.2,p97:102.3,user:40.0},{month:36,p3:89.1,p15:92.2,p50:96.1,p85:99.9,p97:103.1,user:40.0},{month:37,p3:89.7,p15:92.8,p50:96.7,p85:100.6,p97:103.8,user:40.0},{month:38,p3:90.2,p15:93.4,p50:97.4,p85:101.3,p97:104.5,user:40.0},{month:39,p3:90.8,p15:94.0,p50:98.0,p85:102.0,p97:105.2,user:40.0},{month:40,p3:91.3,p15:94.6,p50:98.6,p85:102.7,p97:105.9,user:40.0},{month:41,p3:91.9,p15:95.2,p50:99.2,p85:103.3,p97:106.6,user:40.0},{month:42,p3:92.4,p15:95.7,p50:99.9,p85:104.0,p97:107.3,user:40.0},{month:43,p3:92.9,p15:96.3,p50:100.4,p85:104.6,p97:108.0,user:40.0},{month:44,p3:93.4,p15:96.8,p50:101.0,p85:105.2,p97:108.6,user:40.0},{month:45,p3:93.9,p15:97.4,p50:101.6,p85:105.8,p97:109.3,user:40.0},{month:46,p3:94.4,p15:97.9,p50:102.2,p85:106.5,p97:109.9,user:40.0},{month:47,p3:94.9,p15:98.5,p50:102.8,p85:107.1,p97:110.6,user:40.0},{month:48,p3:95.4,p15:99.0,p50:103.3,p85:107.7,p97:111.2,user:40.0},{month:49,p3:95.9,p15:99.5,p50:103.9,p85:108.3,p97:111.8,user:40.0},{month:50,p3:96.4,p15:100.0,p50:104.4,p85:108.9,p97:112.5,user:40.0},{month:51,p3:96.9,p15:100.5,p50:105.0,p85:109.5,p97:113.1,user:40.0},{month:52,p3:97.4,p15:101.1,p50:105.6,p85:110.1,p97:113.7,user:40.0},{month:53,p3:97.9,p15:101.6,p50:106.1,p85:110.7,p97:114.3,user:40.0},{month:54,p3:98.4,p15:102.1,p50:106.7,p85:111.2,p97:115.0,user:40.0},{month:55,p3:98.8,p15:102.6,p50:107.2,p85:111.8,p97:115.6,user:40.0},{month:56,p3:99.3,p15:103.1,p50:107.8,p85:112.4,p97:116.2,user:40.0},{month:57,p3:99.8,p15:103.6,p50:108.3,p85:113.0,p97:116.8,user:40.0},{month:58,p3:100.3,p15:104.1,p50:108.9,p85:113.6,p97:117.4,user:40.0},{month:59,p3:100.8,p15:104.7,p50:109.4,p85:114.2,p97:118.1,user:40.0},{month:60,p3:101.2,p15:105.2,p50:110.0,p85:114.8,p97:118.7,user:40.0}];</p><p></p><p></p><pre code_snippet_id="1552812" snippet_file_name="blog_20160109_2_9451914" name="code" class="javascript"><script>
var chart;
//初始化的时候显示的横坐标范围
// this method is called when chart is first inited as we listen for "dataUpdated" event
function zoomChart() {
// different zoom methods can be used - zoomToIndexes, zoomToDates, zoomToCategoryValues
chart.zoomToIndexes(0, 24);
}
var amChartDataObjectHeight=eval('${amChartDataObjectHeight}');
var amChartDataObjectWeight = eval('${amChartDataObjectWeight}');
var amChartDataObjectHead = eval('${amChartDataObjectHead}');
var amChartDataObjectBMI = eval('${amChartDataObjectBMI}');
//绘制图标数据
drawTable("chart_1",amChartDataObjectHeight);
drawTable("chart_2",amChartDataObjectWeight);
drawTable("chart_3",amChartDataObjectHead);
drawTable("chart_0",amChartDataObjectBMI);
function drawTable(divId,data){
// var zoomChart = chart.zoomToIndexes(0,24);
// generate some random data first
// SERIAL CHART
chart = new AmCharts.AmSerialChart();
chart.pathToImages = "<%=basePath%>images/amcharts/images/";
chart.dataProvider = data;
chart.categoryField = "month";
// listen for "dataUpdated" event (fired when chart is inited) and call zoomChart method when it happens
chart.addListener("dataUpdated", zoomChart);//第一次加载的时候调用的事件监听器
//横坐标的设置，如果是日期类型则可以进行转换
// AXES
// category
var categoryAxis = chart.categoryAxis;
//categoryAxis.parseDates = true; //<span style="white-space:pre"> </span> 如果横坐标是日期，则需要其实配置转换格式 <span style="white-space:pre"> </span> as our data is date-based, we set parseDates to true
//categoryAxis.minPeriod = "DD"; //<pre name="code" class="javascript">如果横坐标是日期，则需要其实配置转换格式，最小精确到天//纵坐标可以有多个，在我这里至只需要一个因为大家数据是一样的<span style="font-family: Arial, Helvetica, sans-serif;"> </span>//纵坐标2 数据值<pre name="code" class="javascript">//纵坐标3 数据值// var valueAxis3 = new AmCharts.ValueAxis();
// valueAxis3.offset = 50; // this line makes the axis to appear detached from plot area
// valueAxis3.gridAlpha = 0;
// valueAxis3.axisColor = "#B0DE09";
// valueAxis3.axisColor = "#606060";
// valueAxis3.axisThickness = 2;
// chart.addValueAxis(valueAxis3);
// var valueAxis4 = new AmCharts.ValueAxis();
// valueAxis4.axisColor = "#FF6600";
// valueAxis4.axisColor = "#606060";
// valueAxis4.axisThickness = 2;
// valueAxis4.gridAlpha = 0;
// chart.addValueAxis(valueAxis4);
// second value axis (on the right)
// var valueAxis5 = new AmCharts.ValueAxis();
// valueAxis5.position = "right"; // this line makes the axis to appear on the right
// valueAxis5.axisColor = "#FCD202";
// valueAxis5.axisColor = "#606060";
// valueAxis5.gridAlpha = 0;
// valueAxis5.axisThickness = 2;
// chart.addValueAxis(valueAxis5);
// second value axis (on the right)
// var valueAxis6 = new AmCharts.ValueAxis();
// valueAxis6.position = "right"; // this line makes the axis to appear on the right
// valueAxis6.axisColor = "#FCD202";
// valueAxis6.gridAlpha = 0;
// valueAxis6.axisThickness = 2;
// chart.addValueAxis(valueAxis6);
//第一条曲线
// GRAPHS
// first graph
var graph1 = new AmCharts.AmGraph();
graph1.valueAxis = valueAxis1; // we have to indicate which value axis should be used
graph1.title = "p3";//这里是title，横坐标下面的部分标尺
graph1.valueField = "p3";//节点值
// graph1.bullet = "round";//节点形状【至少三总可选，不配置则没有】
graph1.hideBulletsCount = 30;//形状消失时间
graph1.bulletBorderThickness = 1;
chart.addGraph(graph1);
//第二胎曲线
// second graph
var graph2 = new AmCharts.AmGraph();
graph2.valueAxis = valueAxis1; // we have to indicate which value axis should be used
graph2.title = "p15";
graph2.valueField = "p15";
// graph2.bullet = "square";
graph2.hideBulletsCount = 30;
graph2.bulletBorderThickness = 1;
chart.addGraph(graph2);
//第三天曲线
// third graph
var graph3 = new AmCharts.AmGraph();
graph3.valueAxis = valueAxis1; // we have to indicate which value axis should be used
graph3.valueField = "p50";
graph3.title = "p50";
// graph3.bullet = "triangleUp";
graph3.hideBulletsCount = 30;
graph3.bulletBorderThickness = 1;
chart.addGraph(graph3);
var graph4 = new AmCharts.AmGraph();
graph4.valueAxis = valueAxis1; // we have to indicate which value axis should be used
graph4.title = "p85";//这里是title
graph4.valueField = "p85";
// graph4.bullet = "round";//节点形状
graph4.hideBulletsCount = 30;//形状消失时间
graph4.bulletBorderThickness = 1;
chart.addGraph(graph4);
var graph5 = new AmCharts.AmGraph();
graph5.valueAxis = valueAxis1; // we have to indicate which value axis should be used
graph5.title = "p97";
graph5.valueField = "p97";
// graph5.bullet = "square";
graph5.hideBulletsCount = 30;
graph5.bulletBorderThickness = 1;
chart.addGraph(graph5);
var graph6 = new AmCharts.AmGraph();
graph6.valueAxis = valueAxis1; // we have to indicate which value axis should be used
graph6.title = "user";
graph6.valueField = "user";
graph6.bullet = "round";
graph6.colors = "red";
graph6.hideBulletsCount = 30;
graph6.bulletBorderThickness = 1;
chart.addGraph(graph6);
// CURSOR
var chartCursor = new AmCharts.ChartCursor();
chartCursor.cursorPosition = "mouse";
chart.addChartCursor(chartCursor);
// SCROLLBAR
var chartScrollbar = new AmCharts.ChartScrollbar();
chart.addChartScrollbar(chartScrollbar);
// LEGEND
var legend = new AmCharts.AmLegend();
legend.marginLeft = 110;
legend.useGraphSettings = true;
chart.addLegend(legend);
// WRITE
chart.write(divId);
}
</script>
<script type="text/javascript">
function changeMenu(index){
$("#chart_"+index+"_parent").show();
for(var i = 0;i< 4;i++){
if(i!=index){
$("#chart_"+i+"_parent").hide();
}
}
}
/**
这里 的type只能是固定值0，BMI, 1.身高 2，体重，3 头尾
*/
function searchHeight(divId,type,startMonthinputId,endMonthinputId){
var uid = '${uid}';
var startMonth = $("#"+startMonthinputId).val();
var endMonth = $("#"+endMonthinputId).val();
/*
*先检查月龄的合法性
*/
var typeExp = "^\\d+$";
var re = new RegExp(typeExp);
if (startMonth.match(re) == null) {
alert("开始月龄：请输入大于等于0的整数!");
return false;;
}else{
if(startMonth>60){
alert("开始月龄：不能大于60");
return false;
}
}
if (endMonth.match(re) == null) {
alert("结束月龄：请输入大于等于0的整数!");
return false;;
}else{
if(endMonth>60){
alert("结束月龄：不能大于60");
return false;
}
}
startMonth = parseInt(startMonth);
endMonth = parseInt(endMonth);
// alert(startMonth+">"+endMonth);
// alert(startMonth>endMonth);
if(startMonth>endMonth){
alert("结束月龄必须大于开始月龄");
return false;
}else{
// alert(type);
$.post("<%=basePath%>/grow/chartAjax",
{"uid":uid,"type":type},
function(data){
$("#"+startMonthinputId).val(startMonth);
$("#"+endMonthinputId).val(endMonth);
var amChartData = eval(data.data.amChartData);
drawTable(divId,amChartData);
chart.zoomToIndexes(startMonth, endMonth);
});
}
}
</script>
本以为五颜六色挺好看，可是产品说需要做成下面的效果
1.添加区间选择
2.除了user这条线需要高亮，其余最后都是灰色的，这样才能凸显数据
3.我顺带把图片左上方的链接去掉也算是破解了
做成下面的效果：
下面的这三个工作是有难度的
由于不开源免费，我不得不去看他压缩文件，以此来找到解决办法，于是。。。。。。
我真的是去看了，你信么。。
发现其实原来各种彩色颜色，是存在一个数组里面的，而且每次刷新都是随机的生成的颜色，仔细看就能发现这个规律
可是。。。。我们的产品要上面的效果，
逼得我看了源码做了修改：有四处修改
step1:
step2
step3:
step4:
总算搞定一部：这样就可以自己定曲线颜色了
接着添加下的区间选择，
考虑到：这是初始化的时候，默认选择的区间，这个函数
于是想要这这里动手脚
function zoomChart() {
// different zoom methods can be used - zoomToIndexes, zoomToDates, zoomToCategoryValues
chart.zoomToIndexes(0, 24);
}
于是决定用ajax重新请求以此，画好曲线后，再调整区间
代码上面的js中有
至于破解，直接搜索他那个文本，让后把js中的文本置为空就好
到此告一段落~~~~~~~~~
2888
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
