AmCharts - 通过起点和终点连接的图表

时间:2013-05-30 11:18:16

标签: javascript charts amcharts

我每个图表有多个图表,而对于某些未知(对我而言),每个图表的起点和终点都是连接的,例如 enter image description here 简单的问题:如何删除它?我在控制它的文档中找不到任何内容。

我的代码如下:

lineChart = function(id, period) {
    var chart, data = [];
    var cData = chartData[id];
    AmCharts.ready(function() {
        for (item in cData) {
            var i = cData[item];
            data.push({
                date: new Date(i.date),
                impressions: i.impressions,
                clicks: i.clicks,
                conversions: i.conversions,
                ctr: i.ctr,
                profit: i.profit,
                cost: i.cost,
                revenue: i.revenue
            });
        }

        chart = new AmCharts.AmSerialChart();
        chart.dataProvider = data;
        chart.categoryField = "date";
        chart.balloon.color = "#000000";

        // AXES
        // category
        var categoryAxis = chart.categoryAxis;
        categoryAxis.fillAlpha = 1;
        categoryAxis.fillColor = "#FAFAFA";
        categoryAxis.gridAlpha = 0;
        categoryAxis.axisAlpha = 0;
        categoryAxis.minPeriod = period;
        categoryAxis.parseDates = true;
        categoryAxis.gridPosition = "start";
        categoryAxis.position = "bottom";

        // value
        var valueAxis = new AmCharts.ValueAxis();
        valueAxis.dashLength = 5;
        valueAxis.axisAlpha = 0;
        valueAxis.integersOnly = true;
        valueAxis.gridCount = 10;
        chart.addValueAxis(valueAxis);

        // GRAPHS
        // Impressions graph                                            
        var graph = new AmCharts.AmGraph();
        graph.title = "Impressions";
        graph.valueField = "impressions";
        graph.balloonText = "[[title]]: [[value]]";
        //graph.lineAlpha = 1;
        graph.bullet = "round";
        chart.addGraph(graph);

        // Clicks graph
        var graph = new AmCharts.AmGraph();
        graph.title = "Clicks";
        graph.valueField = "clicks";
        graph.balloonText = "[[title]]: [[value]]";
        graph.bullet = "round";
        chart.addGraph(graph);

        // Conversions graph
        var graph = new AmCharts.AmGraph();
        graph.title = "Conversion";
        graph.valueField = "conversions";
        graph.balloonText = "[[title]]: [[value]]";
        graph.bullet = "round";
        chart.addGraph(graph);

        // LEGEND
        var legend = new AmCharts.AmLegend();
        legend.markerType = "circle";
        chart.addLegend(legend);

        var chartCursor = new AmCharts.ChartCursor();
        chartCursor.cursorPosition = "mouse";
        if(period == 'hh')
            chartCursor.categoryBalloonDateFormat = "MMM DD, JJ:00";
        chart.addChartCursor(chartCursor);
        // WRITE
        chart.write(id);
    });
};

2 个答案:

答案 0 :(得分:1)

这看起来像是数据问题。确保您的数据点严格按连续升序排列。

要验证实际数据的外观,请在代码中添加下面的第二行。然后在控制台打开的情况下在Google Chrome中运行您的图表(F12,然后选择控制台标签)

chart.dataProvider = data;
console.debug(data);

检查数据点是否有异常。特别是最后两个。

答案 1 :(得分:0)

问题是每个图表都是在它自己的AmCharts.ready方法中呈现的。该文档声明它是允许的,但是它对我不起作用,因此我将所有渲染包装在一个ready方法中并且问题已修复。