chart 數據 圖表插件

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

拆線示例：

<canvas id="chart_trade" height="60"></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: [3, 13, 19, 14, 11, 14, 15, 16, 15, 17, 19, 22, 21, 22, 21, 25, 27, 29, 22, 22, 21, 23, 25, 27, 29, 22, 21, 21]
                                    }, {
                                        fillColor: "rgba(220,220,220,0)",
                                        strokeColor: "rgba(255,133,27,1)",
                                        pointColor: "rgba(255,133,27,1)",
                                        data: [15, 22, 29, 25, 26, 27, 25,27, 27, 28, 23, 30, 22, 27,33, 34, 35, 36, 40, 38, 44,37, 41, 44, 41, 47, 48, 49]
                                    }, {
                                        fillColor: "rgba(151,187,205,0)",
                                        strokeColor: "rgba(120,192,110,1)",
                                        pointColor: "rgba(120,192,110,1)",
                                        data: [28, 35, 39, 31, 32,33, 35,39, 34, 35, 30, 34, 30, 36,35, 44, 43, 40, 44, 40, 40,45, 44, 45, 40, 44, 40, 43]
                                    }
                                    ]};

                                var ctx = document.getElementById("chart_trade").getContext("2d");
                                var LineChartDemo = new Chart(ctx).Line(lineChartData, {
                                    animation : true,// 是否執行動畫
                                    animationEasing : 'easeOutBounce',// 動畫的特效
                                    animationSteps : 50,// 動畫的時間
                                    tooltipYPadding : 12,//鼠標通過tip背景padding值
                                    tooltipCornerRadius : 3,//鼠標通過tip背景圓角
                                    tooltipTitleFontStyle : 'Arial',//鼠標通過tip字體
                                    pointDot : false,// 是否顯示點數
                                    scaleShowVerticalLines: false,
                                    bezierCurve: true,//是否要曲線
                                    pointDotRadius: 5,//數值點的大小
                                    tooltipFillColor : 'rgba(0,0,0,0.6)',//鼠標通過tip背景
                                    scaleLineColor : '#666',//軸線顏色
                                    scaleGridLineColor: '#ddd',//網格線顏色
                                    scaleFontSize : 14,//軸標字體大小
                                    scaleFontFamily : "'Arial'",
                                    responsive: true//大小自適應
                                });
                            </script>

 

 

餅圖示例：

<canvas id="chart_loss"></canvas>
                            <script>
                                var pieChartData = [
                                    {
                                        value: 20,
                                        color:"#ff851b"
                                    },
                                    {
                                        value : 80,
                                        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