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

标签 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);
    });
};

最佳答案

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

要验证实际数据的样子,请将下面的第二行添加到您的代码中。然后在打开控制台的情况下在 Google Chrome 中运行图表(F12,然后选择“控制台”选项卡)

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

检查数据点是否存在异常情况。尤其是最后两个。

关于javascript - AmCharts - 通过起点和终点连接的图表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16834784/

相关文章:

javascript - php 中出现未定义索引错误

javascript - 多个输入上的 Zclip

将文本旋转到圆心(指定合适角度的问题)

javascript - AmCharts 消除了 serialChart 开始时的间隙

javascript - Amcharts 与 Oracle

AmCharts 4 - 如何在使用 API 时设置导出的名称?

JavaScript 显示加载器,同时 Controller 响应

javascript - D3 两个圆环图相互叠加,不同的数据集。 JavaScript/HTML

java - JavaFX 2.0 可以用作科学图表包吗?

javascript - 在页面加载时使用动画增加 ul 自动高度