在下拉菜单中选择时，显示无中断chart.js

我想在页面加载后只显示一张图表，然后您可以在下拉菜单中选择图表。问题是当我添加类display:none;时，在下拉列表中选中时，图形将不会加载。在下拉菜单中选择时，显示无中断chart.js

我该如何解决这个问题？

<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 
    });

来源

2017-08-15 9minday

请问什么图形？从提供的HTML和JS代码中，一切看起来都不错，并且您的代码不包含任何图形。您是否在使用ChartJS或其他库来初始化图表？如果是这样，请提供这些代码。 –

@nelsonyeung感谢您的回答。我有一个单独的chart.js图。当我删除显示时，图表显示：无。现在编辑和添加代码:) – 9minday

@nelsonyeung更新:) – 9minday

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

可以修复（1是非常简单的，所以你可能想尝试）：

1.使用jQuery的最初隐藏容器

取下#rpudiv的style="display:none;"：

<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, 
    // ... 
};

来源

2017-08-15 19:24:47

在HTML，用id = 'RPU' 在元件上尝试添加 “不透明度：0”，而不是 “显示：无”，而在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"); 
      } 
    }); 
});

我敢肯定的是，问题是，图表不会在显示器上初始化：无元素。所以我们试图通过不透明度隐藏元素：0。

我希望它有帮助！

来源

2017-08-15 18:07:58

谢谢！它的作品，但唯一的问题是，图表的位置不起作用。有任何想法吗？再次感谢！：D – 9minday

你可以给我更多关于图表位置的细节吗？ –

在下拉菜单中选择时，显示无中断chart.js

回答

相关问题