Javascript ChartJS线条图表-删除线条下方的颜色

好的，我有一个ChartJS折线图，它直接从数据库中的数据填充。 我现在需要的是去掉每一行下面的颜色。[如下面的屏幕截图所示]

这是我的HTML：

<div ng-if="hasData">
    <canvas id="line" class="chart chart-line" data="data" labels="labels" legend="true" series="series" options="options" click="onClick"></canvas>
<div>

那么，我该怎么做呢？ 另外，如何手动设置每行的颜色

例如：

选定日期：蓝色， 高峰日期：黄色， 型号容量：灰色

谢谢。

查看Chart.js文档。在数据集配置中将

fill

属性设置为false：

var data = {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [{
        label: "My First dataset",
        fill: false,
        data: [1, 2, 3]
    }]
};

如果希望每一行具有不同的笔划颜色，请为

borderColor

属性指定一个数组：

var myColors = ['red', 'green', 'blue']; // Define your colors

var data = {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [{
        label: "My First dataset",
        fill: false,
        borderColor: myColors
        data: [1, 2, 3]
    }]
};

这对我很有用：

$scope.color = [{
                  backgroundColor: 'transparent',
                  borderColor: '#F78511',
                },];

我解决了这个问题

---

第一步。将chart js与Angular集成时，下面的html元素内部添加解决方案起作用

$scope.options = {
                    scales: {
                      yAxes: [
                        {
                          id: 'y-axis-1',
                          type: 'linear',
                          display: true,
                          position: 'left'
                        }
                      ]
                    },
                    elements: {
                        line: {
                                fill: false
                        }
                    }
                };

<canvas id="" class="col-sm-12 chart chart-line" chart-data="data"
                            chart-options="options" chart-colors="colors">
</canvas>

$scope.options={
比例：{
雅克斯：[
{
id:'y轴-1'，
类型：'线性'，
显示：对，
位置：'左'
}
]
},
要素：{
行：{
填充：假
}
}
};

我也遇到了同样的问题，使用angular-chart.js获得了理想的结果：

$scope.override = {
    fill: false
};

及

---

只需在数据集选项中将填充选项设置为false：

data: {
   datasets: [{
      label: "",
      data: dataPoints,
      borderColor: color ,
      fill:false //this for not fill the color underneath the line
                                }]
                            },

---

只需调整ts文件以包括：：

chartOptions = {
scales: { xAxes: [{}],  yAxes: [{}] },
elements: { line: { fill: false } }
};

html文件看起来像：：

<div style="display: block; width: 500px; height: 400px;">
<canvas
  baseChart
  [chartType]="'line'"
  [datasets]="chartData"
  [labels]="chartLabels"
  [colors]="lineChartColors"
  [options]="chartOptions"
  [legend]="true"
  (chartClick)="onChartClick($event)">
</canvas>
</div>

---

这将起作用

好的，但我对每个图表的设置是不同的。我没有数据集配置…这是什么不同的设置？你是否为chart.js使用了一些angular插件？你创建了自定义代码吗？@LinusBorg我也不知道。在文档中找不到关于该特定设置的任何内容。我是Chart.js的贡献者，问题中的代码不是来自核心库。

<canvas class="chart chart-line" 
    chart-dataset-override="override"
    chart-data="data">
</canvas>

data: {
   datasets: [{
      label: "",
      data: dataPoints,
      borderColor: color ,
      fill:false //this for not fill the color underneath the line
                                }]
                            },

chartOptions = {
scales: { xAxes: [{}],  yAxes: [{}] },
elements: { line: { fill: false } }
};

<div style="display: block; width: 500px; height: 400px;">
<canvas
  baseChart
  [chartType]="'line'"
  [datasets]="chartData"
  [labels]="chartLabels"
  [colors]="lineChartColors"
  [options]="chartOptions"
  [legend]="true"
  (chartClick)="onChartClick($event)">
</canvas>
</div>