我有一张适用于谷歌浏览器的d3.js图表。
但是同样的图表并没有在firefox中绘制数据。
我已经尝试更新这两种浏览器,但即便如此,我仍然遇到了这个问题。
Chrome:https://imgur.com/h2ps8M2
Firefox:https://imgur.com/a/ywRwB
可以通过Firefox中的图表看到我获取数据(检查轴上的数字)。问题在于绘制数据。
这是图表的代码。
class EstadoFrotaGraficoController {
constructor() {
this.name = 'estadoFrotaGrafico';
}
$onInit() {
this.options = {
chart: {
type: 'stackedAreaChart',
height: 450,
margin : {
top: 20,
right: 20,
bottom: 30,
left: 40
},
x: function(d){return d[0];},
y: function(d){return d[1];},
useVoronoi: false,
clipEdge: true,
duration: 100,
useInteractiveGuideline: true,
xAxis: {
showMaxMin: false,
tickFormat: function(d) {
return d3.time.format('%b %d')(new Date(d));
},
rotateLabels:(-15),
tickValues: function (d) { //set axis everyday frequency
return d[0].values.map(function (item) {
return item.x;
})
},
},
yAxis: {
tickFormat: function(d){
return d3.format(',.2f')(d);
}
},
zoom: {
enabled: true,
scaleExtent: [1, 10],
useFixedDomain: false,
useNiceScale: false,
horizontalOff: false,
verticalOff: true,
unzoomEventType: 'dblclick.zoom'
},
controlOptions: ['Stacked', 'Expanded'],
controlLabels: {
stacked: 'Empilhado',
expanded: 'Expandido'
}
}
};
}
$onChanges() {
if (this.fleet) {
this.data = this._generateData(this.fleet);
console.log(this.data);
}
}
_generateData(fleet) {
let formattedFleet = [];
formattedFleet.push(this._generateChartValues("Menor que 20mm", '#c88180', fleet, 'group1'));
formattedFleet.push(this._generateChartValues("Entre 20mm e 30mm", '#008f83', fleet, 'group2'));
formattedFleet.push(this._generateChartValues("Entre 30mm e 40 mm", '#e47c26', fleet, 'group3'));
formattedFleet.push(this._generateChartValues("Maior que 40mm", '#3b74bb', fleet, 'group4'));
return formattedFleet;
}
_generateChartValues(chartName, chartColor, originalData, seriesName) {
return {
key: chartName,
color: chartColor,
values: originalData.map(function(record) {
return [new Date(record.date), record[seriesName]]
})
}
}
}
export default EstadoFrotaGraficoController;
有谁知道为什么会这样?