Question

我试图找出为什么that chart 比容器宽。我注意到，如果我完全删除宽度for the first screenshot，然后在下一个中设置宽度：100％。但是，我无法强迫这种风格，我认为这不是正确的方法。

以下是我的图表的设置。除此之外，我不使用任何其他CSS。

var chart = new Highcharts.Chart({
          chart: {
            renderTo: 'container10',
            type: 'line',
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false,
            spacingRight: 5,
            height: 370,
            width: 770
          },
          title: {
            text: 'Database volume'
          },
          colors:['#229369', '#00526F'],
          xAxis: { 
            categories: catValues
          },
          yAxis: [{
            title: {
              text: 'Table size in MB'
            },
            labels: {
              style: {
                  color: '#229369'
              }
            }
          },
          {
            title: {
              text: 'Index size in MB'
            },
            labels: {
              style: {
                  color: '#00526F'
              }
            },
            opposite: true
          }],
          tooltip: {
              valueSuffix: ' MB'
          },
          plotOptions: {
            line: {
              dataLabels: {
                enabled: true
              },
              enableMouseTracking: true
            }
          },
          series: [{
            name: 'Table',
            data: series1,
          }, {
            name: 'Index',
            yAxis: 1,
            data: series2
          }]
      });

Answer 1

我不确定这是否是解决问题的正确方法，但似乎有效。我设置了图表指令的容器宽度。

.chart-wrapper {
  width: 99%;
}

然后在指令代码onDataLoaded或windowResized中我调用它：

function resize() {
  height = chart.height;
  width = $(".chart-wrapper").width();
  chart.setSize(width, height, doAnimation = false);
}

HIghcharts - 图表宽度不是父容器的大小

1 个答案: