AM图表不在图表中绘制直线答案

【问题标题】：AM chart does not draw straight line in graphAM图表不在图表中绘制直线
【发布时间】：2012-03-28 09:34:40
【问题描述】：

我想使用 AMChart 显示一个直线图。但如果它们的 y 值相等，它不会在点之间画线。我怎么解决这个问题。

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>amCharts examples</title>
    <link rel="stylesheet" href="style.css" type="text/css">
    <script src="../amcharts/amcharts.js" type="text/javascript"></script>          
    <script type="text/javascript">
        var chart;
        var graph;

        // months in JS are zero-based, 0 means January 
        var chartData = [{
            year: new Date(1950, 0),
            value: 300
        }, {
            year: new Date(1951, 0),
            value: 300
        }, {
            year: new Date(1952, 0),
            value: 300
        }, {
            year: new Date(1953, 0),
            value: 300
        }];


        AmCharts.ready(function () {
            // SERIAL CHART
            chart = new AmCharts.AmSerialChart();
            chart.pathToImages = "../amcharts/images/";
            chart.dataProvider = chartData;
            chart.marginLeft = 10;
            chart.categoryField = "year";
            chart.zoomOutButton = {
                backgroundColor: '#000000',
                backgroundAlpha: 0.15
            };

            // listen for "dataUpdated" event (fired when chart is inited) and call zoomChart method when it happens
            chart.addListener("dataUpdated", zoomChart);

            // AXES
            // category
            var categoryAxis = chart.categoryAxis;
            categoryAxis.parseDates = true; // as our data is date-based, we set parseDates to true
            categoryAxis.minPeriod = "YYYY"; // our data is yearly, so we set minPeriod to YYYY
            categoryAxis.gridAlpha = 0;

            // value
            var valueAxis = new AmCharts.ValueAxis();
            valueAxis.axisAlpha = 0;
            valueAxis.inside = true;
            chart.addValueAxis(valueAxis);

            // GRAPH                
            graph = new AmCharts.AmGraph();
            graph.type = "smoothedLine"; // this line makes the graph smoothed line.
            graph.lineColor = "#d1655d";
            graph.negativeLineColor = "#637bb6"; // this line makes the graph to change color when it drops below 0
            graph.bullet = "round";
            graph.bulletSize = 5;
            graph.lineThickness = 2;
            graph.valueField = "value";
            chart.addGraph(graph);

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

            // SCROLLBAR
            var chartScrollbar = new AmCharts.ChartScrollbar();
            chartScrollbar.graph = graph;
            chartScrollbar.backgroundColor = "#DDDDDD";
            chartScrollbar.scrollbarHeight = 30;
            chartScrollbar.selectedBackgroundColor = "#FFFFFF";
            chart.addChartScrollbar(chartScrollbar);

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

        // this method is called when chart is first inited as we listen for "dataUpdated" event
        function zoomChart() {
            // different zoom methods can be used - zoomToIndexes, zoomToDates, zoomToCategoryValues
            chart.zoomToDates(new Date(1949, 0), new Date(1955, 0));
        }
    </script>
</head>

<body>
    <div id="chartdiv" style="width:100%; height:400px;"></div>
</body>

【问题讨论】：

标签： javascript amcharts

【解决方案1】：

你是否幸运地使用了谷歌浏览器？如果是，我有同样的问题，这似乎是谷歌浏览器本身的一个错误，它阻止绘制共线折线，就像你在问题中描述的那样......

这是错误报告的链接，您可能可以关注它... http://code.google.com/p/chromium/issues/detail?id=60306

【讨论】：

感谢您的回答，使用AMChart最新版本后，显示折线图没问题。

【解决方案2】：

对此我不确定。但同样的事情发生在我身上。我使用 amcharts 2.10.8 浏览器是 IE 9,FF 21。即使垂直轴的值是常数（即 271），图形也显示为曲线而不是直线。所以我将 graph.type 改为 line 而不是 smoothedLine。这帮助我克服了这个问题。

【讨论】：