Amchart有两条线

时间:2014-11-02 20:55:45

标签: amcharts

我有两行的amchart:

<script type="text/javascript">
var chart;
var graph;
var chartData2 = [
            {"year":"2014-10-04 23:30:03", "v1":9.1, "v2":0},
            {"year":"2014-10-04 23:45:02", "v1":8.8, "v2":86.2},
            ...
            {"year":"2014-10-05 23:30:02", "v1":8.7, "v2":98.7},
            {"year":"2014-10-05 23:45:02", "v1":8.5, "v2":98.7},
            {"year":"2014-10-06 00:00:01", "v1":8.4, "v2":98.5},
            {"year":"2014-10-06 00:15:02", "v1":8.5, "v2":98.3},
            {"year":"2014-10-06 00:30:01", "v1":8.4, "v2":97.9}
        ];

        AmCharts.ready(function () {
            // SERIAL CHART
            chart = new AmCharts.AmSerialChart();
            chart.pathToImages = "../amcharts/images/";
            chart.dataProvider = chartData2;
            chart.marginLeft = 10;
            chart.categoryField = "year";
            chart.dataDateFormat = "JJ:NN:SS";
            //chart.addListener("dataUpdated", zoomChart);

            // AXES
            // category
            var categoryAxis = chart.categoryAxis;
            categoryAxis.parseDates = true;
            categoryAxis.minPeriod = "100";
            categoryAxis.dashLength = 3;
            categoryAxis.minorGridEnabled = true;
            categoryAxis.minorGridAlpha = 0.1;

            // value
            var valueAxis = new AmCharts.ValueAxis();
            valueAxis.id = "ax1";
            valueAxis.axisAlpha = 0;
            valueAxis.inside = true;
            valueAxis.dashLength = 3;
            valueAxis.position = "right";
            chart.addValueAxis(valueAxis);

            var valueAxis2 = new AmCharts.ValueAxis();
            valueAxis2.id = "ax2";
            valueAxis2.axisAlpha = 0;
            valueAxis2.inside = true;
            valueAxis2.dashLength = 3;
            valueAxis2.baseValue = -20;
            valueAxis2.position = "left";
            chart.addValueAxis(valueAxis2);

            // GRAPH
            graph = new AmCharts.AmGraph();
            graph.valueaxis = "ax1";
            graph.type = "smoothedLine";
            graph.lineColor = "#d1655d";
            graph.negativeLineColor = "#637bb6";
            graph.bullet = "square";
            graph.bulletSize = 8;
            graph.bulletBorderColor = "#FFFFFF";
            graph.bulletBorderAlpha = 1;
            graph.bulletBorderThickness = 2;
            graph.lineThickness = 2;
            graph.valueField = "v1";
            graph.title = "title v1";
            graph.balloonText = "[[category]]<br><b><span style='font-size:14px;'>[[value]]</span></b>";
            chart.addGraph(graph);

            graph2 = new AmCharts.AmGraph();
            graph2.valueAxis = "ax2";
            graph2.type = "smoothedLine";
            graph2.lineColor = "#d1655d";
            graph2.negativeLineColor = "#637bb6";
            graph2.bullet = "round";
            graph2.bulletSize = 8;
            graph2.bulletBorderColor = "#FFFFFF";
            graph2.bulletBorderAlpha = 1;
            graph2.bulletBorderThickness = 2;
            graph2.lineThickness = 2;
            graph2.valueField = "v2";
            graph2.title = "title v2";
            graph2.balloonText = "[[category]]<br><b><span style='font-size:14px;'>[[value]]</span></b>";
            chart.addGraph(graph2);

            // CURSOR
            var chartCursor = new AmCharts.ChartCursor();
            chartCursor.cursorAlpha = 0;
            chartCursor.cursorPosition = "mouse";
            chartCursor.categoryBalloonDateFormat = "JJ:NN:SS";
            chart.addChartCursor(chartCursor);

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

            chart.creditsPosition = "bottom-right";

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

 

我可以看到x轴和y轴,但没有带有值的线。有人可以帮帮我吗?

1 个答案:

答案 0 :(得分:1)

两个问题:

  1. dataDateFormat不正确,应为:chart.dataDateFormat = "YYYY-MM-DD JJ:NN:SS";
  2. minPeriod不正确,应为:categoryAxis.minPeriod = "ss";