当前位置: 首页 > 工具软件 > Amcharts > 使用案例 >

Amcharts图表控件的使用

庞鸿骞
2023-12-01

1、jquery的ajax取到值后push到二维数组chartData(Date类型,float类型),chart.dataProvider = chartData;绑定到图表

2、demo里还有种固定的写法 dataProvider: [{"date": "2012-01-01", "value": 44}, {"date": "2012-01-02","value": 12}],如果你是动态数据千万不要想着按照这样的格式做字符串拼接来绑定数据,完全没有用,一定要用第一种push到数组的方法,浪费我几个小时的教训!


 <script type="text/javascript">
        var chart;
        var chartTitle;
        var chartWebID;
        var chartData = [];


        $(function() {
            $.ajax({
                url: "WebService.asmx/GetElements",
                type: "POST",
                data: {
                    WebID: $('#webid').val()
                },
                dataType: "json",
                success: function(result) {
                    $.each(result, function(i, n) {
                        var elementDate = new Date(Date.parse(n.UpdateTime.replace(/-/g, "/")));
                        var elementValue = parseFloat(n.ElementValue);
                        chartTitle = n.ElementName;
                        chartWebID = n.ElementInWebID;
                        chartData.push({
                            date: elementDate,
                            value: elementValue
                        });
                    })


                    // SERIAL CHART        
                    chart = new AmCharts.AmSerialChart();
                    chart.pathToImages = "amcharts/images/";
                    chart.dataProvider = chartData;
                    chart.dataDateFormat = "YYYY-M-D HH:NN:SS";
                    chart.categoryField = "date";




                    // AXES
                    // category
                    var categoryAxis = chart.categoryAxis;
                    categoryAxis.parseDates = true;
                    categoryAxis.minPeriod = "ss";
                    categoryAxis.gridAlpha = 0.1;
                    categoryAxis.minorGridAlpha = 0.1;
                    categoryAxis.axisAlpha = 0;
                    categoryAxis.minorGridEnabled = true;
                    categoryAxis.inside = true;


                    // value
                    var valueAxis = new AmCharts.ValueAxis();
                    valueAxis.tickLength = 0;
                    valueAxis.axisAlpha = 0;
                    valueAxis.showFirstLabel = false;
                    valueAxis.showLastLabel = false;
                    chart.addValueAxis(valueAxis);


                    // GRAPH
                    var graph = new AmCharts.AmGraph();
                    graph.dashLength = 3;
                    graph.lineColor = "#00CC00";
                    graph.valueField = "value";
                    graph.dashLength = 3;
                    graph.bullet = "round";
                    graph.balloonText = "[[category]]<br><b><span style='font-size:14px;'>" + chartTitle + " |网站编号:" + chartWebID + " |历史价格:[[value]]元</span></b>";
                    chart.addGraph(graph);


                    // CURSOR
                    var chartCursor = new AmCharts.ChartCursor();
                    chart.addChartCursor(chartCursor);


                    // SCROLLBAR
                    var chartScrollbar = new AmCharts.ChartScrollbar();
                    chart.addChartScrollbar(chartScrollbar);


                    // HORIZONTAL GREEN RANGE
                    var guide = new AmCharts.Guide();
                    guide.value = 10;
                    guide.toValue = 20;
                    guide.fillColor = "#00CC00";
                    guide.inside = true;
                    guide.fillAlpha = 0.2;
                    guide.lineAlpha = 0;
                    valueAxis.addGuide(guide);


                    // WRITE
                    chart.write("chartdiv");
                },
                error: function(e) { console.log(e); }
            });
        });
    </script>


 类似资料: