Salesforce Visualforce 实现Chart混合图表柱形图+折线图

苦逼的我

已于 2023-04-13 16:26:40 修改

阅读量151

点赞数

文章标签：开发语言

于 2023-04-13 16:26:26 首次发布

本文链接：https://blog.csdn.net/weixin_44997869/article/details/130133587

版权

controller可以定义后台，datasets可以自己修改controller来实现

<apex:page lightningStylesheets="true" showHeader="true" sidebar="false" controller="EmailOrderProgressController">

  <apex:slds />
  <html>
  <head>
    <title>Chart混合图表</title>
  <script src="https://cdn.staticfile.org/Chart.js/3.9.1/chart.js"></script>
  </head>
  <body>
  
  <canvas id="myChart" width="400" height="400"></canvas>
  <script>
  const ctx = document.getElementById('myChart');
  const data = {
    labels: [
    '一月份',
    '二月份',
    '三月份',
    '四月份'
    ],
    datasets: [{
      type: 'bar',
      label: '柱形图数据集',
      data: [45, 49,52, 100],
      borderColor: 'rgb(255, 99, 132)',
      backgroundColor: 'rgba(0,0,255)'
    }, {
      type: 'line',
      label: '折线图数据集',
      data: [45, 49,52, 100],
      fill: false,
      borderColor: 'rgb(54, 162, 235)'
    }]
  };
  const config = {
    type: 'scatter',
    data: data,
    options: {
      responsive: true, // 设置图表为响应式，根据屏幕窗口变化而变化
      maintainAspectRatio: false,// 保持图表原有比例
      scales: {
        y: {
          beginAtZero: true
        }
      }
    }
  };
  const myChart = new Chart(ctx, config);
  </script>
  
  </body>
  </html>

</apex:page>