amcharts | var lineChart = [{
month: "Jan",
shanghai: 7.0,
beijing: -0.2,
wuhan: -0.9,
shenzhen: 3.0
}, {
month: "Feb",
shanghai: 6.9,
beijing: 0.8,
wuhan: 0.6,
shenzhen: 3.2
}, {
month: "Mar",
shanghai: 9.5,
beijing: 5.7,
wuhan: 3.5,
shenzhen: 2.7
}, {
month: "Apr",
shanghai: 14.5,
beijing: 11.3,
wuhan: 8.4,
shenzhen: 4.5
}, {
month: "May",
shanghai: 18.2,
beijing: 17.0,
wuhan: 13.5,
shenzhen: 7.9
}, {
month: "Jun",
shanghai: 21.5,
beijing: 22.0,
wuhan: 17.0,
shenzhen: 9.2
}, {
month: "Jul",
shanghai: 25.2,
beijing: 24.8,
wuhan: 18.6,
shenzhen: 12.0
}, {
month: "Aug",
shanghai: 26.5,
beijing: 24.1,
wuhan: 17.9,
shenzhen: 14.6
}, {
month: "Sep",
shanghai: 23.3,
beijing: 20.1,
wuhan: 14.3,
shenzhen: 14.2
}, {
month: "Oct",
shanghai: 18.3,
beijing: 14.1,
wuhan: 9.0,
shenzhen: 13.3
}, {
month: "Nov",
shanghai: 13.9,
beijing: 8.6,
wuhan: 3.9,
shenzhen: 10.6
}, {
month: "Dec",
shanghai: 9.6,
beijing: 2.5,
wuhan: 1.0,
shenzhen: 8.8
}];
chart = new AmCharts.AmSerialChart();
chart.dataProvider = lineChart;
chart.categoryField = "month";
chart.addTitle("每月温度统计", 16, "#274B6D", 1, false);
var categoryAxis = chart.categoryAxis;
categoryAxis.gridAlpha = 0;
var valueAxis = new AmCharts.ValueAxis();
valueAxis.axisAlpha = 0;
valueAxis.title = "温度(°C)";
valueAxis.titleColor = "#4D759E";
chart.addValueAxis(valueAxis);
var graph = new AmCharts.AmGraph();
graph.lineColor = "#2F7ED8";
graph.valueField = "shanghai";
graph.bullet = "round";
graph.bulletSize = 4;
graph.lineThickness = 2;
graph.type = "smoothedLine";
chart.addGraph(graph);
graph = new AmCharts.AmGraph();
graph.lineColor = "#0D233A";
graph.valueField = "beijing";
graph.bullet = "round";
graph.bulletSize = 4;
graph.lineThickness = 2;
graph.type = "smoothedLine";
chart.addGraph(graph);
graph = new AmCharts.AmGraph();
graph.lineColor = "#8BBC21";
graph.valueField = "wuhan";
graph.bullet = "round";
graph.bulletSize = 4;
graph.lineThickness = 2;
graph.type = "smoothedLine";
chart.addGraph(graph);
graph = new AmCharts.AmGraph();
graph.lineColor = "#910000";
graph.valueField = "shenzhen";
graph.bullet = "round";
graph.bulletSize = 4;
graph.lineThickness = 2;
graph.type = "smoothedLine";
chart.addGraph(graph);
var chartCursor = new AmCharts.ChartCursor();
chartCursor.cursorAlpha = 0;
chartCursor.zoomable = false;
chart.addChartCursor(chartCursor);
chart.write("splines-amcharts");
| ready |
highcharts | $('#splines-highcharts').highcharts({
chart: {
type: 'spline'
},
title: {
text: '每月温度统计'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
title: {
text: '温度(°C)'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
valueSuffix: '°C'
},
plotOptions: {
spline: {
marker: {
symbol: "circle",
radius: 2
}
}
},
series: [{
name: '上海',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
}, {
name: '北京',
data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
}, {
name: '武汉',
data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
}, {
name: '深圳',
data: [3.0, 3.2, 2.7, 4.5, 7.9, 9.2, 12.0, 14.6, 14.2, 13.3, 10.6, 8.8]
}]
});
| ready |