我正在尝试使用 amcharts4 lib 来构建快速图表。我首先使用谷歌图表，当我使用相同的数据时，两个 lib 都显示不同的图表。
谷歌图表(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 ddnHH:mm");
dateAxis.periodChangeDateFormats.setKey("minute", "MMM ddnHH: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加载图表的速度确实更快。
你的am4charts-Chart是堆叠的(这意味着两个数据系列都是相加的)，而谷歌图表不是。
更改谷歌图表选项
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