javascript - 在谷歌图表和 amcharts4 之间没有得到相同的图表

Question

我正在尝试使用 amcharts4 库来构建快速图表。我首先使用了谷歌图表，当我使用相同的数据时，两个库显示不同的图表。

Google 图表 ( https://codepen.io/anon/pen/EJeXae )

var hashDelimiter = ',';
var maxDataPoints = 1500; // How many datapoints before we start erasing them
var chartType = 'area';
var snmpProcessor = 'https://api.myjson.com/bins/8se3o';
var invertInOut = false;

// Global variables
var charts = null;
var chartOptions = null;
var chartData = null;

$("#title").hide();
$("#content").html('').addClass('fullChart');
fixBodyHeight();
$( window ).resize(fixBodyHeight);

getChartData();

// Load the Chart
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(function () {
    chartData = new google.visualization.DataTable();
    chartData.addColumn('datetime', 'Time');
    chartData.addColumn('number', 'Traffic In', 'style');
    chartData.addColumn('number', 'Traffic Out');

    chartOptions = {
        title: name,
        curveType: 'function',
        legend: {
            position: 'top',
            alignment: 'end',
        },
        vAxis: {
            format: '# Mbps',
            minValue: 0,
        },
        hAxis: {
        },
        colors: ['#0f0', '#00f'],
        series: {
            0: {
                'line-width': 3,
            },
            1: {
                'line-width': 1,
            },
        },
        pointSize: 4,
        chartArea: {
            right: 5,
            left: '7%',
            bottom: 20,
            top: 60,
        },
    };
    if (chartType == 'area') {
        chartOptions.pointSize = 0;
        charts = new google.visualization.AreaChart(document.getElementById('content'));
    } else {
        charts = new google.visualization.LineChart(document.getElementById('content'));
    }
    charts.draw(chartData, chartOptions);
});

function getChartData() {
    $.get(snmpProcessor, function( d ) {
        $.each(d, function(index, element) {
            if (element.inDiff > 0 && element.outDiff > 0) {
                if (invertInOut) {
                    addChartPoint(new Date(element.time * 1000), element.timeDiff, element.outDiff, element.inDiff);
                } else {
                    addChartPoint(new Date(element.time * 1000), element.timeDiff, element.inDiff, element.outDiff);
                }
            }
        });
    });
}
    
function addChartPoint(time, timeDiff, dataIn, dataOut) {
    dataIn = dataIn / 100000 / timeDiff;
    dataOut = dataOut / 100000 / timeDiff;
    //dataIn = (dataIn*8) / (1024*1024) / timeDiff;
    //dataOut = (dataOut*8) / (1024*1024) / timeDiff;
    if (chartData) {
        chartData.addRow([time, dataIn, dataOut]);
        if (chartData.getNumberOfRows() > maxDataPoints) {
            chartData.removeRows(0, chartData.getNumberOfRows() - maxDataPoints + 1);
        }
        charts.draw(chartData, chartOptions);
    }
}

function fixBodyHeight() {
    $("#content").css('height', $( window ).innerHeight()+'px');
    if (chartData) {
        charts.draw(chartData, chartOptions);
    }
}

function parseQueryString() {
    var queryString = location.search.substr(1);
    var params = {}, queries, temp, i, l;
    queries = queryString.split("&");
    for ( i = 0, l = queries.length; i < l; i++ ) {
        temp = queries[i].split('=');
        params[temp[0]] = temp[1];
    }
    return params;
}

html, body { 
    margin: 0;
    padding: 0;
}

.click {
    cursor: pointer;
}

.fullChart {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<h1 id="title"></h1>
<div id="content"></div>

这里是 amcharts4 ( https://codepen.io/anon/pen/XQPgXB )

am4core.useTheme(am4themes_animated);

var chart = am4core.create("chartdiv", am4charts.XYChart);
chart.dataSource.url = "https://api.myjson.com/bins/8se3o";
chart.dataSource.events.on("parseended", function(ev) {
  // parsed data is assigned to data source's `data` property
  var data = ev.target.data;
  data.sort(function(lhs, rhs) {
    return lhs.time - rhs.time;
  });
  data.forEach(function(item) {
    item.time *= 1000;
  });
});

chart.dateFormatter.inputDateFormat = "x";

var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
dateAxis.dateFormats.setKey("minute", "MMM dd\nHH:mm");
dateAxis.periodChangeDateFormats.setKey("minute", "MMM dd\nHH:mm");

var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.tooltip.disabled = true;

var series = chart.series.push(new am4charts.LineSeries());
series.dataFields.dateX = "time";
series.name = "outDiff";
series.dataFields.valueY = "outDiff";
series.tooltipHTML = "<span style='font-size:14px; color:#000000;'><b>{valueY.value}</b></span>";
series.tooltipText = "[#000]{valueY.value}[/]";
series.tooltip.background.fill = am4core.color("#FFF");
series.tooltip.getStrokeFromObject = true;
series.tooltip.background.strokeWidth = 3;
series.tooltip.getFillFromObject = false;
series.fillOpacity = 0.6;
series.strokeWidth = 2;
series.stacked = true;

var series2 = chart.series.push(new am4charts.LineSeries());
series2.name = "inDiff";
series2.dataFields.dateX = "time";
series2.dataFields.valueY = "inDiff";
series2.tooltipHTML = "<span style='font-size:14px; color:#000000;'><b>{valueY.value}</b></span>";
series2.tooltipText = "[#000]{valueY.value}[/]";
series2.tooltip.background.fill = am4core.color("#FFF");
series2.tooltip.getFillFromObject = false;
series2.tooltip.getStrokeFromObject = true;
series2.tooltip.background.strokeWidth = 3;
series2.sequencedInterpolation = true;
series2.fillOpacity = 0.6;
series2.stacked = true;
series2.strokeWidth = 2;

chart.cursor = new am4charts.XYCursor();
chart.cursor.xAxis = dateAxis;
chart.scrollbarX = new am4core.Scrollbar();

chart.legend = new am4charts.Legend();
chart.legend.position = "top";

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

#chartdiv {
    width: 100%;
    height: 500px;
}

<script src="https://www.amcharts.com/lib/4/core.js"></script>
<script src="https://www.amcharts.com/lib/4/charts.js"></script>
<script src="https://www.amcharts.com/lib/4/themes/animated.js"></script>
<div id="chartdiv"></div>

这两个图表不完全一样，我不知道去哪里看。 amcharts4 加载图表确实更快。

Answer 1

您的 am4charts-Chart 是堆叠的(这意味着两个数据系列都加起来了)，而 Google 图表不是。

更改谷歌图表选项

    chartOptions = {
        title: name,
        curveType: 'function',
        legend: {
            position: 'top',
            alignment: 'end',
        },
        isStacked: true,
        vAxis: {
            format: '# Mbps',
            minValue: 0,
        },
        hAxis: {
        },
        colors: ['#0f0', '#00f'],
        series: {
            0: {
                'line-width': 3,
            },
            1: {
                'line-width': 1,
            },
        },
        pointSize: 4,
        chartArea: {
            right: 5,
            left: '7%',
            bottom: 20,
            top: 60,
        },
    };

保持 isStacked: true 以实现相同的图表(或将 am4chart 更改为未堆叠)。

https://developers.google.com/chart/interactive/docs/gallery/areachart#stacking-areas

https://www.amcharts.com/docs/v4/chart-types/xy-chart/#Stacking