Question

在my code here中，我正在绘制3张图表。第一个显示正常，但其他两个的宽度缩小了。

我读了this article但他们使用的逻辑是不同的（附加到正文）。

有人能指出我正确的方向吗？

代码：

function defaultChartConfig(container, data, useGuideline) {
    if (useGuideline === undefined) useGuideline = true;

    nv.addGraph(function() {
        var chart;
        chart = nv.models.lineChart()
        .margin({right: 100, left: 100, bottom: 150})
        .x(function(d) { return d[0] })
        .y(function(d) { return d[1] })
        .showLegend(true)
        .color(keyColor)
        //.forceY([-1000, 1]);                

        chart.xAxis.tickValues(function (d) {
            var dateSets = [];
            for (var i = 0; i < d[0]['values'].length; i++) {
                dateSets.push(d[0]['values'][i]['0'])
            }
            return dateSets;
        });

        chart.xAxis
        .showMaxMin(false)
        .axisLabel("My X-Axis")
        .tickFormat(function(d) { return d3.time.format('%x')(new Date(d)) });

        chart.yAxis            
        .axisLabel("My Y-Axis")
        .tickFormat(d3.format(',.2f'));

        chart.size(80);  // datapoint circle size

        d3.select('#' + container + ' svg')
        .text('')
        .datum(data)
        .transition().duration(500).call(chart);

        // translate and rotate x-axis ticks
        var xTicks = d3.select('.nv-x.nv-axis > g').selectAll('g');

        xTicks
        .selectAll('g > .tick > text')
        .attr('transform', function(d,i,j) { return 'translate (-10, 40) rotate(-90 0,0)' });

        // move x-axis label down
        xTicks.select('.nv-axislabel')
        .attr("y", 90)
        .classed({'nv-axislabel':false});

        // add gap in between legends and chart
        d3.select(".nv-legendWrap")
        .style("float", "right")
        .attr("transform", "translate(0,-75)");

        d3.select(".nv-wrap.nv-lineChart")
        .attr("transform", "translate(100,75)");

        return chart;
    });
}

Answer 1

您已在函数之外预处理数据。因此它仅应用于data变量，而不是data2。

只需将其移至defaultChartConfig：

data[0].values.forEach(function(element){
    var myDate = new Date(element[0]);
    var epochDate = myDate.getTime();
    //console.log(epochDate);
    element[0] = epochDate;
});

更新了工作小提琴：jsfiddle.net/vfe2B/103/

在单页上绘制多个图形时发出问题

1 个答案: