如何在Chart.js中设置默认图表类型和默认刻度类型？

huus2vyu 于 2023-01-13 发布在 Chart.js

关注(0)|答案(1)|浏览(189)

我在一页纸上有一堆图表，都是“线”图，它们在X轴和Y轴上都使用“线性”刻度。我很想取消必须做的事情

const graph1 = new Chart(ctx1, {
        type: 'line',
        options: {
            scales: {
                x: {
                    type: 'linear',
                },
                y: {
                    type: 'linear',
                },
            },
        },
    });

相反，你只需：

const graph1 = new Chart(ctx1, {});

我尝试设置Chart.defaults.type和Chart.defaults.scales.type，但没有效果。
也称为Chart.options.type。

chart.js

来源：https://stackoverflow.com/questions/75086175/how-do-i-set-a-default-chart-type-and-a-default-scale-type-in-chart-js

1条答案

按热度按时间

vnjpjtjt1#

如果您希望避免重复配置，您可能希望使用默认类型和选项声明和初始化常量或变量，然后使用ES6简写语法表示对象文字。
下面是一个可能的实现：

const ctx1 = document.getElementById('myChart1'),
      ctx2 = document.getElementById('myChart2'),
      type = 'line',
      options = {
        scales: {
          x: {
            type: 'linear',
          },
          y: {
            type: 'linear',
          }
        }
      };

function addData(chart, data) {
  chart.data = { datasets: [] };
  chart.data.datasets.push(data);
  chart.update();
}

let chart1 = new Chart(ctx1, { type, options }); // <--- HERE

addData(chart1, {
  label: 'Dataset 1',
  data: [{ x: 0, y: 10 }, { x: 1, y: 20 }, { x: 2, y: 15 }]
});
  
let chart2 = new Chart(ctx2, { type, options }); // <--- HERE

addData(chart2, {
  label: 'Dataset 2',
  data: [{ x: 0, y: 7 }, { x: 1, y: 1 }, { x: 2, y: 3 }]
});

.chart-container {
  position: relative;
  height: 40vh;
}

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<div class="chart-container">
  <canvas id="myChart1"></canvas>
</div>

<div class="chart-container">
  <canvas id="myChart2"></canvas>
</div>

赞(0）回复(0）举报 2023-01-13

我来回答

如何在Chart.js中设置默认图表类型和默认刻度类型？

1条答案

相关问题

热门标签

最新问答