线条图-删除线条下面的颜色

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

Example of Graph

这是我的 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>

这就是我的秘诀:

            scope.labels = ['02:00','04:00','06:00', '08:00', '10:00', '12:00','14:00', '16:00', '18:00', '20:00', '22:00'];
scope.series = series;
scope.data = [volumesSelectedDate, volumesPeakDate, volumesModelCapacity];
            

                            

scope.options = {
scaleOverride: true,
scaleStartValue: 0,
scaleSteps: 11,
scaleStepWidth: 6910,
}
            

scope.loadingDailyAppVolumes = false;
scope.hasData = true;
            

            

};
scope.onClick = function (points, evt) {
//console.log(points, evt);
};

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

例如:

选定日期: 蓝色, 高峰日期: 黄色, 模型容量: 灰色。

谢谢。

95907 次浏览
小开

Check this section on the Chart.js docs. Set the fill property to false within your dataset configuration:

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

Specify an array to the borderColor property if you want each line to have a different stroke color:

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]
}]
};
小开

This worked for me:

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

I solved this issue.

First step. html element inner add <- chart-colors="colors" like this : 

<canvas id="line" class="chart chart-line" data="data" labels="labels" chart-colors="colors" legend="true" series="series" options="options" click="onClick"></canvas>

second step. $scope val colors Add like this : 

$scope.colors = [{
backgroundColor : '#0062ff',
pointBackgroundColor: '#0062ff',
pointHoverBackgroundColor: '#0062ff',
borderColor: '#0062ff',
pointBorderColor: '#0062ff',
pointHoverBorderColor: '#0062ff',
fill: false /* this option hide background-color */
}, '#00ADF9', '#FDB45C', '#46BFBD'];

good luck!

小开

Below solution was working when integrated chart js with Angular

$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>
小开

I had the same issue, using angular-chart.js and got the desired result with:

$scope.override = {
fill: false
};

and 

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

Just set the fill option to be false in the datasets options:

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

just tweak ts file to include ::

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

html file looking as ::

<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>

This will Work

小开

Set fill: value false

let chart = new Chart('myChart', {


type: 'line',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
fill: false, // <-- Here
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
y: {
beginAtZero: true
}
}
}
});
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.6.2/dist/chart.min.js"></script>
<canvas id="myChart" width="400" height="400"></canvas>


提交答案