向 NVD3 multiChart 添加额外的图表，缩短图表（由于图例）修复了什么？

Question

我正在使用 NVD3's multiChart 图表。当我在图表中添加额外的面积图时，图例似乎下推了图表。添加的图表越多，图表看起来就越扭曲。

请注意第 2 个屏幕截图中的 Y 轴比原始屏幕截图短了近 50%。

我尝试用 CSS 删除图例，但图表仍然缩短：

.legendWrap {
    display: none;
}

甚至用 Javascript 删除了图例，图表仍然被压缩：

removeElementsByClass('nv-legend');

function removeElementsByClass(className){
  var elements = document.getElementsByClassName(className);
  while(elements.length > 0){
      elements[0].parentNode.removeChild(elements[0]);
  }
}

知道如何解决这个问题吗？

我的完整 drawChart 函数：

function drawChart(res) {
    console.log('res',res);

    nv.addGraph(function() {
      chart = nv.models.multiChart()
        .margin({
          top: 20,
          right: 40,
          bottom: 50,
          left: 40
        })
        .interpolate("linear") // don't smooth out the lines
        .color(d3.scale.category10().range());

      chart.xAxis.tickFormat(function(d) {
        return d3.time.format('%I:%M')(new Date(d));
      });
      chart.yAxis1.tickFormat(d3.format(',f'));
      chart.yAxis2.tickFormat(function(d) {
        return '$' + d3.format(',f')(d)
      });

      d3.select('svg#chart')
        .datum(res)
        .transition().duration(500).call(chart);

      chart.tooltip.hidden(true);

      chart.update();

      d3.select('.lines2Wrap').node().parentNode.insertBefore(d3.select('.stack1Wrap').node(), d3.select('.lines2Wrap').node());

      // Add top padding to xAxis timeline:
      d3.selectAll('.nv-x.nv-axis > .nv-wrap.nv-axis > g > g.tick > text').each(function(d,i) {
          d3.select(this).attr('dy', '1.5em');
      });

      d3.selectAll('.nv-x.nv-axis > .nv-wrap.nv-axis > .nv-axisMaxMin > text').each(function(d,i) {
          d3.select(this).attr('dy', '1.5em');
      });

      nv.utils.windowResize(chart.update);

      return chart;
    });
}

Answer 1

你是对的，传说是问题的原因。您可以像这样完全删除图例，而不是在 CSS 中设置 display: none：

chart = nv.models.multiChart()
  .margin({
    top: 20,
    right: 40,
    bottom: 50,
    left: 40
  })
  .showLegend(false) // don't show the legend
  .interpolate("linear") // don't smooth out the lines
  .color(d3.scale.category10().range());

完整的工作代码 here.

Answer 2

Anychart 多图表自定义主题完整代码

<!doctype html>
<html>
<head>
  <script src="https://cdn.anychart.com/js/7.14.3/anychart-bundle.min.js"></script>
<link rel="stylesheet" href="https://cdn.anychart.com/css/latest/anychart-ui.min.css">
<div id="container"></div>
<style>
html, body, #containerss {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
</style>
</head>
<body>
    <div id="containerss"></div>

    <script type="text/javascript">
anychart.onDocumentReady(function() {
  // create variable for custom theme
  var customTheme = {
    // define settings for bar charts
    "column": {
      // set chart title
      "title": {
"text": "Column Chart",
"enabled": true
      },
      // settings for default x axis
      "defaultXAxisSettings": {
// set x axis title
"title": {
  "text": "Retail Channel",
  "enabled": true
}
      },
      // settings for default y axis
      "defaultYAxisSettings": {
// set axis name
"title": {
  "text": "Sales",
  "enabled": true
}
      }
    }
  };

  // data
  var data = anychart.data.set([
    ["Department Stores", 63, 87,87],
    ["Discount Stores", 72, 66,42],


  ]);

  // apply custom theme
  anychart.theme(customTheme);

  // append a theme 
  anychart.appendTheme(additional_theme);

  // set chart type
  chart = anychart.column();
  // set data
  seriesData_1 = data.mapAs({x: [0], value: [1]});
  seriesData_2 = data.mapAs({x: [0], value: [2]});
  seriesData_3 = data.mapAs({x: [0], value: [3]});
  chart.column(seriesData_1);
  chart.column(seriesData_2);
  chart.column(seriesData_3);

  // set container and draw chart
  chart.container("containerss");
  chart.draw();
});

additional_theme = {
  "column": {


    "palette": {
      "type": "distinct",
      "items": ["red", "#8a9597",'#000']
    }
  }
};

    </script>
</body>
</html>

向 NVD3 multiChart 添加额外的图表，缩短图表（由于图例）修复了什么？

Adding additional graphs to NVD3 multiChart, shortens the chart (due to legend) what is the fix?

javascript

angularjs

d3.js

charts

nvd3.js