nvd3.js图表​​在Firefox中没有绘制,但它在chrome中效果很好

时间:2017-10-25 22:57:44

标签: javascript google-chrome firefox d3.js nvd3.js

我有一张适用于谷歌浏览器的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;

有谁知道为什么会这样?

0 个答案:

没有答案