如何在amCharts 4中创建平滑线条而非尖锐线条？

你尝试的tensionX、tensionY和chart.smoothing属性在当前Chart.js版本（v3+）中已废弃或不存在，这是线条无平滑效果的核心原因。正确的配置方式如下：

• 移除所有无效的平滑配置项
• 在每个需要平滑的数据集里添加borderTension属性（取值范围0-1，数值越大线条越平滑）

修改后的代码示例 #

const ctx = document.getElementById('myChart').getContext('2d');
const chart = new Chart(ctx, {
  type: 'line',
  data: {
    datasets: [
      {
        label: "Sensor 1",
        data: [],
        borderColor: '#FF6384',
        backgroundColor: 'rgba(255, 99, 132, 0.1)',
        fill: true,
        borderTension: 0.4 // 控制线条平滑度
      },
      {
        label: "Sensor 2",
        data: [],
        borderColor: '#36A2EB',
        backgroundColor: 'rgba(54, 162, 235, 0.1)',
        fill: true,
        borderTension: 0.4
      }
    ]
  },
  options: {
    scales: {
      x: {
        type: 'realtime',
        realtime: {
          delay: 2000,
          onRefresh: function(chart) {
            chart.data.datasets.forEach(dataset => {
              dataset.data.push({
                x: Date.now(),
                y: Math.floor(Math.random() * 100)
              });
            });
          }
        }
      },
      y: {
        beginAtZero: true,
        max: 100
      }
    }
  }
});

关键说明 #

Chart.js v3+版本中，线条平滑度由**数据集级别的borderTension**控制，替代了旧版的tension属性。你之前使用的属性要么属于旧版API，要么是不存在的配置项，因此无法生效。调整borderTension的数值即可获得不同程度的平滑效果。

内容的提问来源于stack exchange，提问作者user20754168