Question

我想在页面加载后只显示一个图表，然后您可以在下拉菜单中选择一个图表。问题是当我添加课程display:none;时，图表在下拉列表中选中时不会加载。

我该如何解决这个问题？

<select id='chart-graph-progress'>
    <option value="revenue-opt">Revenue</option>
    <option value="rpu-opt">Revenue per user</option>
</select>

<div class="card2 full-chart-topmargin" id='revenue'>
    <div class="big-text1-blue text-center">
        Revenue
    </div>
    <div class="card-block">
        <div class="chart-wrapper fullsize">
            <canvas id="revenue-chart"></canvas>
        </div>
    </div>
</div>
<div style="display:none;" class="card2 full-chart-topmargin" id='rpu'>
    <div class="big-text1-blue text-center">
        Revenue per user
    </div>
    <div class="card-block">
        <div class="chart-wrapper fullsize">
            <canvas id="rpu-chart"></canvas>
        </div>
    </div>
</div>

这是我的custom.js文件。

$(document).ready(function(){
    $('#chart-graph-progress').on('change', function() {
      if ( this.value == 'revenue-opt')
          {
            $("#revenue").show();
          }
          else
          {
            $("#revenue").hide();
          }
    });
    $('#chart-graph-progress').on('change', function() {
      if ( this.value == 'rpu-opt')
          {
            $("#rpu").show();
          }
          else
          {
            $("#rpu").hide();
          }
    });
});

chart.js之

  var randomScalingFactor = function(){ return Math.round(Math.random()*100)};
  var lineChartData = {
    labels : ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
    datasets : [
      {
        label: 'Revenue',
        labelColor : '#fff',
        fontColor : '#fff' ,
        backgroundColor : 'rgba(220,220,220,0.2)',
        borderColor : 'rgba(220,220,220,1)',
        pointBackgroundColor : 'rgba(220,220,220,1)',
        pointBorderColor : '#fff',
        data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
      }
    ]
  };

  var options = {
    maintainAspectRatio: false,
    legend: {
      display: false,
    },
    scales: {
      xAxes: [{
        gridLines: {
         display: false,
         color: '#03A5C5',
         lineWidth: 8,
         },
        ticks: {
          fontColor: "white",
        },
      }],
      yAxes: [{
        gridLines: {
         display: false,
         color: '#03A5C5',
         lineWidth: 8,
         },
        ticks: {
          fontColor: "white",
          beginAtZero: true,
        }
      }]
    }
  };
  var ctx = document.getElementById('revenue-chart');
  var chart = new Chart(ctx, {
    responsive: true,
    type: 'line',
    data: lineChartData,
    options: options
  });

  var randomScalingFactor = function(){ return Math.round(Math.random()*100)};
  var lineChartData = {
    labels : ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
    datasets : [
      {
        label: 'Revenue',
        labelColor : '#fff',
        fontColor : '#fff' ,
        backgroundColor : 'rgba(220,220,220,0.2)',
        borderColor : 'rgba(220,220,220,1)',
        pointBackgroundColor : 'rgba(220,220,220,1)',
        pointBorderColor : '#fff',
        data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
      }
    ]
  };

  var options = {
    maintainAspectRatio: false,
    legend: {
      display: false,
    },
    scales: {
      xAxes: [{
        gridLines: {
         display: false,
         color: '#03A5C5',
         lineWidth: 8,
         },
        ticks: {
          fontColor: "white",
        },
      }],
      yAxes: [{
        gridLines: {
         display: false,
         color: '#03A5C5',
         lineWidth: 8,
         },
        ticks: {
          fontColor: "white",
          beginAtZero: true,
        }
      }]
    }
  };
  var ctx = document.getElementById('rpu-chart');
  var chart = new Chart(ctx, {
    responsive: true,
    type: 'line',
    data: lineChartData,
    options: options
  });

Answer 1

在html中，在id =＆＃39; rpu＆＃39;的元素上尝试添加＆＃34;不透明度：0＆＃34;而不是＆＃34; display：none＆＃34;，并且在custom.js文件中而不是显示和隐藏更改为：

$(document).ready(function(){
    $('#chart-graph-progress').on('change', function() {
      if ( this.value == 'revenue-opt')
          {
            $("#revenue").css("opacity", "1");
          }
          else
          {
            $("#revenue").css("opacity", "0");
          }
    });
    $('#chart-graph-progress').on('change', function() {
      if ( this.value == 'rpu-opt')
          {
            $("#rpu").css("opacity", "1");
          }
          else
          {
            $("#rpu").css("opacity", "0");
          }
    });
});

我很确定问题是图表没有在display：none元素上初始化。所以我们试图通过不透明度来隐藏元素：0。

我希望它有所帮助！

Answer 2

如果您使用ChartJS 1，请查看下面的第一个可能的修复程序。如果您正在使用ChartJS 2，那么显然已修复此错误（GitHub issue #762）。但是，经过一些长时间的调试后，我发现当display: none;与maintainAspectRatio: false一起使用时，有时候图表的高度被压扁为无，我认为这是你的问题。我已为此记录issue。

可能的修复（1很简单，所以你可能想尝试一下）：

<强> 1。使用jQuery初始隐藏容器

从style="display:none;" #rpu

中删除div

<div class="card2 full-chart-topmargin" id='rpu'>

最初使用jQuery隐藏它：

$(document).ready(function(){
  $("#rpu").hide();

  // ...
});

<强> 2。使用固定尺寸的画布

将两个画布设置为某个固定大小：

<canvas id="revenue-chart"  width="600" height="400"></canvas>
<canvas id="rpu-chart"  width="600" height="400"></canvas>

然后使用maintainAspectRatio: true代替：

var options = {
  maintainAspectRatio: true,
  // ...
};

在下拉列表中选择时，display none会打破chart.js

2 个答案: