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

你是对的，传说是问题的原因。您可以完全删除图例中的display: none，而不是在CSS中设置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());：

{{1}}

完整的工作代码here。

Answer 2

具有自定义主题的Anychart multichart完整代码

<!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，缩短图表（由于图例）修复的内容是什么？

2 个答案: