Highcharts翻译系列之十九：曲线图例子（1）
代码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html><head> <title>重量曲线图</title> <script type="text/javascript" src="Lib/Scripts/jquery-1.7.2.min.js"></script> <script type="text/javascript"> $(function () { var splinechart; $(document).ready(function () { splinechart = new Highcharts.Chart({ chart: { renderTo: 'splineContainer', type: 'spline', margin: [25, 30, 70, 50] }, title: { text: '体重', x: 50, y: 10, style: { display: 'none' } }, color: [ '#006ebe' ], subtitle: { style: { display: 'none' } }, xAxis: { lineWidth: 1, lineColor: '#dfe7ef', gridLineWidth: 0, lineColor: '#000000', startOnTick: true, tickPixelInterval: 110, type: 'datetime', labels: { rotation: -45, y: 40, style: { color: '#000000', fontSize: '8px', fontWeight: 'normal' } }, tickColor: '#000000', tickLength: 5, tickWidth: 1, dateTimeLabelFormats: { day: '%Y-%m-%d', week: '%Y-%m-%d', month: '%Y-%m-%d', year: '%Y-%m-%d' }, title: { style: { display: 'none' } } }, yAxis: { allowDecimals: true, startOnTick: true, endOnTick: true, lineWidth: 1, gridLineWidth:0, gridLineColor: '#d3d3d3', lineColor: '#000000', tickColor: '#000000', tickLength: 5, tickWidth: 1, title: { text: '重量(kg)', style: { color: '#02528b', fontSize: '12px', fontWeight: 'normal' } }, labels: { style: { color: '#000000', fontSize: '10px', fontWeight: 'normal' } } }, legend: { layout: 'horizontal', backgroundColor: '#ffffff', align: 'right', verticalAlign: 'top', x: 0, y: -10, floating: true, shadow: false, borderWidth: 0 }, tooltip: { shared: true, crosshairs: true }, plotOptions: { spline: { shadow: false, animation: false, lineWidth: 1 }, series: { color: '#000000', marker: { enabled: true, fillColor: '#006ebe', lineWidth: 1, lineColor: '#006ebe', radius: 3 } } }, series: [{ name: '重量', data: [[Date.UTC(2012, 9, 8, 10, 22, 00), 88.8], [Date.UTC(2012, 9, 10, 10, 22, 00), 87.9], [Date.UTC(2012, 9, 13, 10, 00, 00), 87.4], [Date.UTC(2012, 9, 14, 12, 05), 87.2], [Date.UTC(2012, 9, 16, 10, 00, 00), 87.2], [Date.UTC(2012, 9, 18, 10, 00, 00), 86.8], [Date.UTC(2012, 9, 22, 10, 00, 00), 86.5], [Date.UTC(2012, 9, 25, 10, 00, 00), 86.5], [Date.UTC(2012, 9, 30, 10, 00, 00), 86.4]], dataLabels: { enabled: true } }] }); }); }); </script></head><body> <script src="Lib/Highcharts-2.2.5/js/highcharts.js" type="text/javascript"></script> <!-- <script src="../../js/modules/exporting.js"></script>--> <div id="bg" style="margin: 0; padding: 0;"> <div style="width: 736px; margin: 0 auto; height: 27px; line-height: 27px; font-family: Microsoft YaHei; font-size: 14px"> <span style="color: #006ebd;">体重曲线图：</span><span style="font-size: 14px; color: #000000;">单位[kg]</span></div> <div id="splineContainer" style="width: 736px; height: 310px; margin: 0 auto; padding-bottom: 10px; border-bottom: 1px dashed #9b9b9b;"> </div> </div></body></html>
运行效果：
