Question

好的，所以我有一个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>

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

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

示例：

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

感谢。

Answer 1

在Chart.js文档上查看this section。在数据集配置中将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]
    }]
};

Answer 2

当使用Angular

集成图表js时，以下解决方案正在运行

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

Answer 3

我解决了这个问题。

第一步。 html元素内部添加＆lt; - 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>

第二步。 $ 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'];

祝你好运！

Answer 4

这对我有用：

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

Answer 5

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

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

Answer 6

仅调整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>

这将起作用

Answer 7

我遇到了同样的问题，使用angular-chart.js并获得了所需的结果：

$scope.override = {
    fill: false
};

和

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

ChartJS折线图 - 删除线

7 个答案: