在下拉菜單中選擇時，顯示無中斷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

回答

相關問題