![](/img/trans.png)
[英]Multiple charts with same data not loading in same page: Highcharts
[英]Multiple charts not loading on the same page
我使用Chart Js在Codeigniter的同一頁面上實現多個圖表,但只有一個圖表加載; 我的目標是能夠在我的應用儀表板頁面中預設多個數據; 但是當我嘗試廣告多個圖表時,只會加載第一個聊天:我的Js代碼是:
// Sales Chart
var salesCanvas = document.getElementById("salesChart");
Chart.defaults.global.defaultFontFamily = "Source Sans Pro";
Chart.defaults.global.defaultFontSize = 14;
//Chart.defaults.global.defaultColor = 'red';
var labelData= <?php echo json_encode($label); ?>;
var chartData= <?php echo json_encode($data); ?>
var salesData = {
labels: labelData,
datasets: [{
label: "Sales",
data: chartData,
//chart styling
lineTension: 0,
fill: false,
borderColor: 'orange',
backgroundColor: 'transparent',
borderDash: [5, 5],
pointBorderColor: 'orange',
pointBackgroundColor: 'rgba(255,150,0,0.5)',
pointRadius: 5,
pointHoverRadius: 10,
pointHitRadius: 30,
pointBorderWidth: 2,
pointStyle: 'rectRounded'
//chart styling
}]
};
var chartOptions = {
legend: {
display: true,
position: 'bottom',
labels: {
boxWidth: 80,
fontColor: 'black'
}
}
};
var lineChart = new Chart(salesCanvas, {
type: 'line',
data: salesData,
options: chartOptions
});
// /. Sales Chart
// Expenses Chart
var expensesCanvas = document.getElementById("expensesChart");
Chart.defaults.global.defaultFontFamily = "Source Sans Pro";
Chart.defaults.global.defaultFontSize = 14;
var labelData= <?php echo json_encode($label); ?>;
var chartData= <?php echo json_encode($data); ?>
var expensesData = {
labels: labelData,
datasets: [{
label: "Expenses",
data: chartData,
//chart styling
lineTension: 0,
fill: false,
borderColor: 'orange',
backgroundColor: 'transparent',
borderDash: [5, 5],
pointBorderColor: 'orange',
pointBackgroundColor: 'rgba(255,150,0,0.5)',
pointRadius: 5,
pointHoverRadius: 10,
pointHitRadius: 30,
pointBorderWidth: 2,
pointStyle: 'rectRounded'
//chart styling
}]
};
var chartOptions = {
legend: {
display: true,
position: 'bottom',
labels: {
boxWidth: 80,
fontColor: 'black'
}
}
};
var lineChart = new Chart(expensesCanvas, {
type: 'line',
data: expensesData,
options: chartOptions
});
// /. Expenses Chat
我使用Chart Js在Codeigniter的同一頁面上實現多個圖表,但只有一個圖表加載; 我的目標是能夠在我的應用儀表板頁面中預設多個數據; 但是當我嘗試廣告多個圖表時,只會加載第一個聊天:我的Js代碼是:
var lineChart = new Chart(expensesCanvas, {...
var lineChart = new Chart(salesCanvas, {...
只是嘗試使用其他名稱,替換lineChart = expensesChart和salesChart
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.