NVD3.js多图形，具有固定的x轴和y轴

NVD3.js multichart with fixed x- and y-axis

本文关键字：轴和 js 图形 NVD3      更新时间：2023-09-26

我正在使用NVD3.js多图表来显示各种数据。是否可以设置x轴和y轴的固定范围。我举了一个Plunker的例子：http://plnkr.co/edit/OLN87eIE21tImHktYIH6?p=preview

 var chart = nv.models.multiChart()
            .margin({top: 30, right: 60, bottom: 50, left: 70})
            .color(d3.scale.category10().range());
            chart.xAxis.tickFormat(function(d) {
                  return d3.time.format('%H:%m')(new Date(d));
                });
            chart.yAxis1.tickFormat(d3.format(',.1f'));
            chart.yAxis2.tickFormat(d3.format(',.1f'));
            d3.select('#diagramChart svg')
            .datum(bpmData)
            .transition().duration(500).call(chart);

我想将x轴设置为00:00到23:59，并在取消选择一个数据时停止调整大小。与y轴相同，但与其他值相同。有办法做到这一点吗？谢谢

您在plnkr上引用的是nvd3的旧版本。有一个文档和一个新的1.7.x版本-许多图表都使用共享库，因为特别是multiChart有缺陷。你搜索得不好，已经有一些问题了。

所以你的问题试试

            chart
            .yDomain1([0,200])
            .yDomain2([0,10]);

我无法在xAxis上获得这样的s.th。但我读到，如果它在折线图、条形图或堆叠面积图上工作，并不是所有的都在多图表中工作，所以这可能是问题所在。

帖子：

nvd3-多条形图-x-轴域

y-轴-nvd3-d3 的可变角度

如何操作特定域-x-轴-in-nvd3线图

更新：这是我在multiChart上运行的代码的一部分，该代码在nvd3 1.7中运行（但由于我从1.1更新了它，可能会有一些不推荐使用的符号）：

nv.addGraph(function() {
var chart = nv.models.multiChart()
  .yDomain1([-20, 80]) 
  .yDomain2([-50, 200]) //important! works only with manual tickValues definiton (see chart1.yAxis2.tickValues([...]) !) 
  .margin({top: 30, right: 75, bottom: 40, left: 70}) //important for display of lable on y2Axis!
  ;
//chart option settings  
var options = {
    showControls: false,
    showLegend: true
}
chart1.options(options); 
d3.json(filepath, function(error, json) {
  if (error) {
    return console.warn(error);
  }
  var _inputdata = json.map(function(series) {
    series.values = series.values.map(function(d) {
      return { x: d[0], y: d[1] }
    });
    series.key = series.key.map(function(d) {
      return d[lang]
    });
  return series;
  });
  chart1.xAxis
    .axisLabel("Date")
    .tickFormat(function(d) { return (d3.time.format('%d.%m. %H:%M')(new Date(d))) })
    ;
  chart1.yAxis1
   .axisLabel('leftAxis')
   .axisLabelDistance(10)
   .tickFormat(d3.format('.2f'))
   ;
  chart1.yAxis2
    .axisLabel('rightAxis')
    .tickFormat(d3.format('.2f'))
    //(problem is, nvd3 does always tickValues of 20 and then jumps to tickVlaues of 50). 
    //not possible to set fixed steps of ticks like "y2ticks(10), workaround (-50 til 200):"
    .tickValues([-50,-25,0,25,50,75,100,125,150,175,200]) 
    ;
  d3.select('#chart_1').append("svg")
    .attr("id", "chart1")
    .attr("height", 500)
    .datum(_inputdata)
    .transition()
    .duration(300)
    .call(chart1)
    ;
  nv.utils.windowResize(function() {
    chart1.update();
  });
  //update chart to correct alignments of objects (e.g. wrapping o. elements) 
  chart1.update();
});

})；

相关文章：