Javascript ChartJS 折线图 - 去除线条下方的颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/38222345/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
ChartJS Line Charts - remove color underneath lines
提问by Manus Gallagher
Okay, so I have a ChartJS line chart working that populates directly from data coming for my db. What I need now is to get rid of the color underneath each of the lines. [as seen in the screenshot below].
好的，所以我有一个 ChartJS 折线图，它直接从我的数据库中的数据中填充。我现在需要的是去掉每条线下面的颜色。[如下面的屏幕截图所示]。
Here's my HTML:
这是我的 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>
Here's My JS:
这是我的JS：
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);
};
So, how would I go about this? Also, how would I go about manually setting the color for each line?
那么，我该怎么做呢？另外，我将如何手动设置每行的颜色？
Example:
例子：
selected date: blue, peak date: yellow, model capacity: grey.
选定日期：蓝色，高峰日期：黄色，型号容量：灰色。
Thanks.
谢谢。
回答by JasonK
Check this sectionon the Chart.js docs. Set the fillproperty to false within your dataset configuration:
在 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]
}]
};
Specify an array to the borderColorproperty if you want each line to have a different stroke color:
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]
}]
};
回答by akshat thakar
Below solution was working when integrated chart js with Angular
当将图表 js 与 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>
回答by Sandy Elkassar
Just set the fill option to be false in the datasets options:
只需在数据集选项中将填充选项设置为 false：
data: {
datasets: [{
label: "",
data: dataPoints,
borderColor: color ,
fill:false //this for not fill the color underneath the line
}]
},
回答by ???
I solved this issue.
我解决了这个问题。
First step. html element inner add <- chart-colors="colors" like this :
第一步。html 元素内部添加 <- chart-colors="colors" 像这样：
<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 val colors 添加如下：
$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!
祝你好运！
回答by Wahome
This worked for me:
这对我有用：
$scope.color = [{
backgroundColor: 'transparent',
borderColor: '#F78511',
},];
回答by Saumyajit
just tweak ts file to include ::
只需调整 ts 文件以包含 ::
chartOptions = {
scales: { xAxes: [{}], yAxes: [{}] },
elements: { line: { fill: false } }
};
html file looking as ::
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>
This will Work
这将工作
回答by Jay
I had the same issue, using angular-chart.js and got the desired result with:
我有同样的问题，使用 angular-chart.js 并得到了想要的结果：
$scope.override = {
fill: false
};
and
和
<canvas class="chart chart-line"
chart-dataset-override="override"
chart-data="data">
</canvas>
