Chart.js 折线图看起来像面积图，线条流畅但不锐利答案

【问题标题】：Chart.js line chart looking as area chart with smooth lines but not sharpChart.js 折线图看起来像面积图，线条流畅但不锐利
【发布时间】：2020-12-28 09:35:15
【问题描述】：

chartjs 折线图显示为面积图，线条流畅。我想让图表成为一个带有尖点的简单折线图。我已经尝试了一些选项，但都是徒劳的。

var AreaChart = new Chart(AreaCharts, {
  type: 'line',
  data: {
    labels: [],
    datasets: [{
        label: 'Required',
        data: [],
        backgroundColor: '#f39233',
        hoverBorderWidth: 2,
        hoverBorderColor: '#054564',
      },
      {
        label: '2nd',
        data: [],
        backgroundColor: '#b8de6f',
        hoverBorderWidth: 2,

        hoverBorderColor: '#054564',
      }
    ]
  },
  options: {
    bezierCurve: false,
    scaleShowValues: true,
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }],
      xAxes: [{
        ticks: {
          autoSkip: true,
          padding: 10,
          fontSize: 10
        }
      }]
    },
    responsive: true,
    maintainAspectRatio: false,
    title: {
      display: true,
      text: ''
    },
  },
});

这是代码。我正在填充其他功能的数据和标签。线条应该很清晰，应该只有线条而不是任何区域。我确实阅读了文档，但这让我感到困惑。

【问题讨论】：

标签： chart.js linechart

【解决方案1】：

我在这里发布了一个解决方案：http://jsfiddle.net/srux4971/

最重要的部分是

data: {
            ...
            datasets: [{
                ...
                fill: false,   //no fill
                lineTension:0, //straight lines

【讨论】：

【解决方案2】：

要将面积图转换为折线图，请将选项fill: false 添加到每个数据集。

如果您还定义了选项borderColor，线条将以所需的颜色显示。

请查看您修改后的代码，看看它是如何工作的。

new Chart('myChart', {
  type: 'line',
  data: {
    labels: ['A', 'B', 'C', 'D', 'E', 'F', 'G'],
    datasets: [{
        label: 'Required',
        data: [3, 2, 4, 5, 6, 4, 3],
        backgroundColor: '#f39233',
        borderColor: '#f39233',
        hoverBorderWidth: 2,
        hoverBorderColor: '#054564',
        fill: false
      },
      {
        label: '2nd',
        data: [4, 1, 3, 5, 3, 4, 2],
        backgroundColor: '#b8de6f',
        borderColor: '#b8de6f',
        hoverBorderWidth: 2,
        hoverBorderColor: '#054564',
        fill: false
      }
    ]
  },
  options: {
    bezierCurve: false,
    scaleShowValues: true,
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }],
      xAxes: [{
        ticks: {
          autoSkip: true,
          padding: 10,
          fontSize: 10
        }
      }]
    },
    responsive: true,
    maintainAspectRatio: false,
    title: {
      display: true,
      text: ''
    }
  },
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<canvas id="myChart" height="200"></canvas>

【讨论】：