차트JS 꺽은선형 차트 - 선 아래 색 제거

차트JS 꺽은선형 차트 - 선 아래 색 제거

그래, 내 db에 대한 데이터를 직접 채우는 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>

My 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);
        };
    

그럼, 이걸 어떻게 해야 할까요?또한 각 라인의 색상을 수동으로 설정하는 방법은 무엇입니까?

예:

선택한 날짜: 파란색, 피크 날짜: 노란색, 모델 용량: 회색.

감사해요.

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

아래 솔루션은 통합 차트 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>

데이터 세트 옵션에서 채우기 옵션을 false로 설정하십시오.

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

이 방법은 효과가 있었습니다.

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

나는 이 문제를 해결했다.

첫 번째 단계html 요소의 inner add <-chart-syslog="syslog"는 다음과 같습니다.

<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'];

행운을 빕니다.

angular-chart.js를 사용해도 같은 문제가 발생했는데, 다음과 같은 결과가 나왔습니다.

$scope.override = {
    fill: false
};

그리고.

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

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>

이것은 동작합니다.

세트fill:가치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>

언급URL : https://stackoverflow.com/questions/38222345/chartjs-line-charts-remove-color-underneath-lines