Amchart.ZC测试

1、

2、代码：（ancharts_test.html 保存成"UTF-8"格式）

<!--内联 XHTML-->
<!--
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-->
<!--内联 HTML5-->
<!DOCTYPE html>

<html>
<head>
    <meta charset="UTF-8">

    <script src="assets/amcharts/amcharts.js" type="text/javascript"></script>
　　<script src="assets/amcharts/serial.js" type="text/javascript"></script>


     <script src="enchart.js" type="text/javascript"></script>

    <script type="text/javascript" >
    <!--

        window.onload = function()
        {
        };

    -->
    </script>

    <!--<link rel="stylesheet" href="???.css">-->
    <style type="text/css">
    <!--

    -->
    </style>
</head>

<body>

<div id="conditionerdiv" style="width: 100%; height: 300px;"></div>

</body>
</html>

 

2,1、enchart.js（保存成"UTF-8"格式）

　　（这个文件放在 ancharts_test.html相同的目录，它是原来的文件"F:\ZC_Other_file\20180124_xx_HtmlUI\监控\js\enchart.js"里面抠出来的部分内容）

            var conditionerData = [
                {
                    "date": "7/5",
                    "income": Math.ceil(Math.random()*80),
                    "expenses": Math.ceil(Math.random()*80)
                },
                {
                    "date": "7/10",
                    "income": Math.ceil(Math.random()*80),
                    "expenses": Math.ceil(Math.random()*80)
                },
                {
                    "date": "7/15",
                    "income": Math.ceil(Math.random()*80),
                    "expenses": Math.ceil(Math.random()*80)
                },
                {
                    "date": "7/20",
                    "income": Math.ceil(Math.random()*80),
                    "expenses": Math.ceil(Math.random()*80)
                },
                {
                    "date": "7/25",
                    "income": Math.ceil(Math.random()*80),
                    "expenses": Math.ceil(Math.random()*80)
                }
            ];
            
            AmCharts.ready(function () {
                // SERIAL CHART
                chart = new AmCharts.AmSerialChart();
                chart.dataProvider = conditionerData;
                chart.categoryField = "date";
                chart.startDuration = 1;
                chart.plotAreaBorderColor = "#DADADA";
                chart.plotAreaBorderAlpha = 1;

                // AXES
                // Category
                var categoryAxis = chart.categoryAxis;
                categoryAxis.gridPosition = "start";
                categoryAxis.gridAlpha = 0.1;
                categoryAxis.axisAlpha = 0;

                // Value
                var valueAxis = new AmCharts.ValueAxis();
                valueAxis.axisAlpha = 0;
                valueAxis.gridAlpha = 0.1;
                valueAxis.position = "top";
                chart.addValueAxis(valueAxis);

                // GRAPHS
                // first graph
                var graph1 = new AmCharts.AmGraph();
                graph1.type = "column";
                graph1.title = "Income";
                graph1.valueField = "income";
                graph1.balloonText = "当前:[[value]]";
                graph1.lineAlpha = 0;
                graph1.fillColors = "#ADD981";
                graph1.fillAlphas = 1;
                chart.addGraph(graph1);

                // second graph
                var graph2 = new AmCharts.AmGraph();
                graph2.type = "column";
                graph2.title = "Expenses";
                graph2.valueField = "expenses";
                graph2.balloonText = "历史:[[value]]";
                graph2.lineAlpha = 0;
                graph2.fillColors = "#81acd9";
                graph2.fillAlphas = 1;
                chart.addGraph(graph2);

                chart.creditsPosition = "top-right";

                // WRITE
                chart.write("conditionerdiv");
            });

 

3、

4、

<!DOCTYPE html>


<head>
    <meta charset="UTF-8">

</head>

<body>

<!--<div id="conditionerdiv" class="col-md-12" style="height: 250px;"></div>-->
<div id="consumptiondiv" style=" height: 250px;"></div>

            
            <script src="assets/amcharts/amcharts.js" type="text/javascript"></script>
            <script src="assets/amcharts/serial.js" type="text/javascript"></script>
            <script src="js/enchart.js"></script>

</body>
</html>

 

5、

 

posted @ 2018-01-25 16:43  HtmlUI  阅读(141)  评论(0)  编辑  收藏  举报