多个图表不在同一页面上加载

时间:2019-06-17 09:19:20

标签: javascript php chart.js

我正在通过使用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代码为:

1 个答案:

答案 0 :(得分:0)

    ZoneId zone = ZoneId.of("Europe/London");
    ZoneRules rules = zone.getRules();
    ZonedDateTime now = ZonedDateTime.now(zone);
    ZoneOffsetTransition transition = rules.nextTransition(now.toInstant());
    Instant max = now.plusYears(15).toInstant();
    while (transition != null && transition.getInstant().isBefore(max)) {
        System.out.println(transition);
        transition = rules.nextTransition(transition.getInstant());
    }

只需尝试使用其他名称,替换lineChart = usageChart和salesChart