文章/答案/技术大牛

发布

社区首页 >问答首页 >Chart.js面

问Chart.js面
EN

Stack Overflow用户

提问于 2022-08-12 12:17:26

回答 1查看 67关注 0票数 0

在chart.js中是否有任何插件或配置选项来创建分面图表？

我需要使用chart.js创建分面图表。图面图在多个图表之间共享X和/或Y轴。(请参阅附件中的图像)，它是许多设计可视化问题的一个非常常见的解决方案，但在chart.js中却没有。

Chart.js V3添加了叠层轴，它可能用于在chart.js中创建分面图表。

刻面图的例子

javascript

chart.js

data-visualization

axis

回答 1

Stack Overflow用户

回答已采纳

发布于 2022-08-12 14:43:52

如果我已经很好地理解了您的用例，那么您需要一个具有“相同”轴的图表实例矩阵。在下面的片段中，我使用了min、max和ticks.count (我认为它们应该足够了)来确保轴具有相同的尺寸。

const getCanvas = function(id) {
  return document.getElementById(id).getContext("2d");
};
const createConfig = function(title, data, x, y) {
  return {
    type: 'line',
    data: {
        labels: ['A', 'B', 'C', 'D', 'E'],
        datasets: [
            {
                data,
                borderColor: 'green',
                borderWidth: 2,
            }]
    },
    options: {
      scales: {
        x: {
          ticks: {
            display: x
          }
        },
        y: {
          min: 0,
          max: 100,
          ticks: {
            display: y,
            count: 5
          }
        }
      },
        plugins: {
          legend: false,
          tooltip: false,
          title: {
            display: true,
            text: title
          }
        }
    }
  };
}
new Chart(getCanvas('myChart1'), createConfig('Amazon', [10, 20, 30, 5, 55], false, true));
new Chart(getCanvas('myChart2'), createConfig('Google', [10, 20, 30, 5, 55], false, false));
new Chart(getCanvas('myChart3'), createConfig('IBM', [10, 20, 30, 5, 55], true, true));
new Chart(getCanvas('myChart4'), createConfig('Microsoft', [10, 20, 30, 5, 55], true, false));

.myChartDiv {
  max-width: 300px;
  max-height: 200px;
}

<script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js"></script>
<html>
  <body>
    <table>
      <tr>
        <td>
    <div class="myChartDiv">
      <canvas id="myChart1" width="300" height="200"/>
    </div>
        </td>
        <td>
    <div class="myChartDiv">
      <canvas id="myChart2" width="300" height="200"/>
    </div>
        </td>
      </tr>
      <tr>
        <td>
    <div class="myChartDiv">
      <canvas id="myChart3" width="300" height="200"/>
    </div>
        </td>
        <td>
    <div class="myChartDiv">
      <canvas id="myChart4" width="300" height="200"/>
    </div>
        </td>
      </tr>
    </table>  
  </body>
</html>

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/73334091

复制

相似问题

问Chart.js面
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Chart.js面EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Chart.js面
EN