Chart.js 折线图看起来像带有平滑线条但不尖锐的区域图

问题描述

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

var AreaChart = new Chart(AreaCharts,{
  type: 'line',data: {
    labels: [],datasets: [{
        label: 'required',data: [],backgroundColor: '#f39233',hoverBorderWidth: 2,hoverBorderColor: '#054564',},{
        label: '2nd',backgroundColor: '#b8de6f',}
    ]
  },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: ''
    },});

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

解决方法

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

最重要的部分是

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table class="table table-bordered" id="RemittanceResult">
  <thead>
    <tr>
      <th class="remInfo" width="50%">Info</th>
      <th class="remData" width="50%">Data</th>
    </tr>
  </thead>
</table>

,

为了将面积图转换为折线图，请在每个数据集中添加选项 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,3],backgroundColor: '#f39233',borderColor: '#f39233',hoverBorderWidth: 2,hoverBorderColor: '#054564',fill: false
      },{
        label: '2nd',data: [4,1,3,2],backgroundColor: '#b8de6f',borderColor: '#b8de6f',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>