chart 数据 图表插件

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>

拆线示例：

<canvas id="chart_trade" height=""></canvas>
                            <script>
                                var lineChartData = {
                                    labels: ["D1", "D2", "D3", "D4", "D5", "D6", "D7", "D8", "D9", "D10", "D11", "D12", "D13", "D14","D15", "D16", "D17", "D18", "D19", "D20", "D21","D22", "D23", "D24", "D25", "D26", "D27", "D28"],
                                    datasets: [{
                                        fillColor: "rgba(151,187,205,0)",
                                        strokeColor: "rgba(255,0,0,1)",
                                        pointColor: "rgba(255,0,0,1)",
                                        data: [, , , , , , , , , , , , , , , , , , , , , , , , , , , ]
                                    }, {
                                        fillColor: "rgba(220,220,220,0)",
                                        strokeColor: "rgba(255,133,27,1)",
                                        pointColor: "rgba(255,133,27,1)",
                                        data: [, , , , , , ,, , , , , , ,, , , , , , ,, , , , , , ]
                                    }, {
                                        fillColor: "rgba(151,187,205,0)",
                                        strokeColor: "rgba(120,192,110,1)",
                                        pointColor: "rgba(120,192,110,1)",
                                        data: [, , , , ,, ,, , , , , , ,, , , , , , ,, , , , , , ]
                                    }
                                    ]};

                                var ctx = document.getElementById("chart_trade").getContext("2d");
                                var LineChartDemo = new Chart(ctx).Line(lineChartData, {
                                    animation : true,// 是否执行动画
                                    animationEasing : 'easeOutBounce',// 动画的特效
                                    animationSteps : ,// 动画的时间
                                    tooltipYPadding : ,//鼠标经过tip背景padding值
                                    tooltipCornerRadius : ,//鼠标经过tip背景圆角
                                    tooltipTitleFontStyle : 'Arial',//鼠标经过tip字体
                                    pointDot : false,// 是否显示点数
                                    scaleShowVerticalLines: false,
                                    bezierCurve: true,//是否要曲线
                                    pointDotRadius: ,//数值点的大小
                                    tooltipFillColor : 'rgba(0,0,0,0.6)',//鼠标经过tip背景
                                    scaleLineColor : '#666',//轴线颜色
                                    scaleGridLineColor: '#ddd',//网格线颜色
                                    scaleFontSize : ,//轴标字体大小
                                    scaleFontFamily : "'Arial'",
                                    responsive: true//大小自适应
                                });
                            </script>

饼图示例：

<canvas id="chart_loss"></canvas>
                            <script>
                                var pieChartData = [
                                    {
                                        value: ,
                                        color:"#ff851b"
                                    },
                                    {
                                        value : ,
                                        color : "#ff4141"
                                    }
                                ];
                                var ctx = document.getElementById("chart_loss").getContext("2d");
                                var LineChartDemo = new Chart(ctx).Pie(pieChartData);
                            </script>

才下配置可在纵坐标上带亿单位

---

scaleLabel : "<%=value/100000000%>亿",

以上可在纵坐标上显示亿

https://www.oschina.net/question/151271_243108

示例: http://web.jobbole.com/83760/

阿里图表：

http://antv.alipay.com/g2-mobile/demo/02-line/line.html