nvd3 多条形图自定义更改 X,Y 键名称



我可以更改数据中的 X 和 Y 键名,以便我可以直接使用我的 JSON 数据在图表中查看并在 x 轴日期之间设置一些范围

var data =[
{"key":"Data 0","values":[{ x: "1996-05-22" , y: 1 },{ x: "1997-06-23" , y: 5 }]}

nv.addGraph(function () {
    var chart = nv.models.multiBarChart();
    chart.multibar.stacked(false);
    chart.showControls(true);
    chart.showLegend(true);
    chart.reduceXTicks(false);
    //chart.xAxis     .tickFormat(function(d) { return d3.time.format("%Y-%m-%d").parse(d) });
     chart.xAxis.rotateLabels(-90);

    d3.select('#chart svg')
        .datum(data)
        .transition().duration(500).call(chart);
    nv.utils.windowResize(chart.update);
    console.log(JSON.stringify(data));
    return chart;
});

我的示例图表:http://jsfiddle.net/gxc27jav/29/

我的要求

  1. 1:将X键更改为"日期",将Y更改为DATA中的计数,并且可以在图表
  2. 2:使刻度值范围为实时日期。目前它只是在数据中显示所有可用的日期。 chart.reduceXTicks(true(;不会使范围均匀。

我找到了这两个问题的答案

 nv.addGraph(function () {
            var chart = nv.models.multiBarChart()
                .x(function (d) {
                    return d.Date // to show Date propery on X axis
                })
                .y(function (d) {
                    return d.y
                });
            chart.multibar.stacked(false);
            chart.showControls(false);
            chart.showLegend(true);
            chart.reduceXTicks(false);
            chart.yAxis
                .tickFormat(d3.format('d'));
            chart.margin({
                bottom: 70
            });


            d3.select('#chart svg')
                .datum(data)
                .transition().duration(500).call(chart);
            var xTicks = d3.select('.nv-x.nv-axis > g').selectAll('g');
            xTicks
                .selectAll('text')
                .attr('transform', function (d, i, j) {
                    return 'translate (-10, 35) rotate(-90 0,0)'
                }); //to adjsut the rotated axis Margins
            nv.utils.windowResize(chart.update);
            // console.log(JSON.stringify(data));
            return chart;
        }

最新更新