Question

我已经尝试了多个示例，但是我无法使线图具有背景透明性，到目前为止，它是蓝色，但是我要设置的颜色是橙色（rgba（255，145 ，68，0.2））。

TL; DR ：如何在折线图上设置填充不透明度？

我遵循了无数的教程，但是它们似乎都在dataset中设置了背景色，这不是我想要的，因为我使用的是动态数据。该代码位于具有大量功能的TypeScript组件中，因此很难提取代码并使之在jsfiddle中工作。

当我在fill:true下设置elements: { line: {时，图形将获得填充，如下图所示。但是我无法在此处设置背景不透明度，

我尝试了以下属性：backgroundColor，fillColor

这是至少的代码：

import {
  Component
} from '../../decorators/component.decorator';
import * as EsChart from '../../../../node_modules/chart.js/dist/Chart.bundle.js';
import * as angular from 'angular';

@Component({
  templateUrl: 'app/dashboard-components/es-line-chart/es-line-chart.component.html',
  bindings: {
    esLineChartId: '@',
    chartTitle: '@',
    labels: '@',
    esScaleMax: '@',
    esScaleMaxSecond: '@',
    esScaleStepW: '@',
    esScaleStepWSecond: '@',
    esScaleMin: '@',
    esScaleMinSecond: '@',
    lowerOkValue: '@',
    targetValue: '@',
    upperOkValue: '@',
    chartDataValueSuffix: '@',
    datasets: '@',
    esXLabelSkips: '@'
  }
})
export default class LineChartComponent {
  $ctrl: any = this;


  getChartOptions(lineChartData, secondYAxis, xLabelSkips) {
    return {
      type: 'line',
      data: lineChartData,
      options: {
        responsive: true,
        maintainAspectRatio: false,
        title: {
          display: true,
          text: this.$ctrl.chartTitle
        },
        legend: {
          display: true,
          labels: {
            boxWidth: 12
          }
        },

        tooltips: {
          enabled: true,
          mode: 'index',
          intersect: false,
          filter: function(tooltipItem, data) {
            return !data.datasets[tooltipItem.datasetIndex].tooltipHidden;
          },
          callbacks: {
            label: function(tooltipItem, data) {
              var currentDataset = data.datasets[tooltipItem.datasetIndex];
              var label = currentDataset.label + ': ';

              label += currentDataset.data[tooltipItem.index] + (currentDataset.dataSuffix ? " " + currentDataset.dataSuffix : "");

              return label;
            }
          }
        },
        elements: {
          line: {
            tension: 0, // disables bezier curves
            borderWidth: 3, // Line stroke width in pixels
            fill: true,
            fillColor: "rgba(255, 145, 68, 0.2)",
            strokeColor: "rgba(255, 145, 68, 0.2)",
            pointColor: "rgba(255, 145, 68, 1)",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(255, 145, 68, 1)"
          },
          point: { // disable the circles/points in the chart lines
            radius: 0,
            hitRadius: 0,
            hoverRadius: 0
          },
        },
        scales: {
          xAxes: [{
            display: true,
            type: 'category',
            ticks: {
              autoSkip: xLabelSkips,
              maxRotation: 45
            },
            afterFit: (scale) => {
              scale.height = 100;
            }
          }],
          yAxes: [{
              id: 'y-axis-0',
              display: true,
              position: 'left',
              ticks: {
                stepSize: this.$ctrl.esScaleStepW ? eval(this.$ctrl.esScaleStepW) : 0.5, // grid lines on yAxis with value distance of stepSize
                suggestedMin: (eval(this.$ctrl.esScaleMin)),
                suggestedMax: (eval(this.$ctrl.esScaleMax))
              }
            },
            {
              id: 'y-axis-1',
              display: secondYAxis,
              position: 'right',
              ticks: {
                stepSize: this.$ctrl.esScaleStepWSecond ? eval(this.$ctrl.esScaleStepWSecond) : 0.5, // grid lines on yAxis with value distance of stepSize
                suggestedMin: (eval(this.$ctrl.esScaleMinSecond)),
                suggestedMax: (eval(this.$ctrl.esScaleMaxSecond))
              }
            }
          ]
        }
      }
    };
  }

  getExtraDatasets(datasetType: string, dataLabel: string, fillValue: number, chartSpan: number) {
    var dataFill = [];

    for (var i = 0; i < chartSpan; i++) {
      dataFill.push(fillValue);
    }

    return {
      label: dataLabel,
      borderColor: datasetType === "limit" ? 'rgba(205, 8, 4, 1)' : datasetType === "target" ? 'rgba(20, 180, 2, 1)' : 'rgba(0, 0, 0, 0.5)',
      borderWidth: 0.5,
      //tooltipHidden: true,
      data: dataFill
    };
  }

  removeEmptyDatasets() {
    //var test = "[{label: 'Verklig cykeltid',borderColor: 'rgba(60, 141, 188, 0.75)',borderWidth: 4,data: },{label: 'Kalkylerad cykeltid',borderColor: 'rgba(205, 108, 104, 0.75)',borderWidth: 4,data: [59]}]";
    this.$ctrl.datasets = this.$ctrl.datasets.replace(/data: *,/g, "data: [],");
    this.$ctrl.datasets = this.$ctrl.datasets.replace(/data: *}/g, "data: []}");
    this.$ctrl.datasets = this.$ctrl.datasets.replace(/: *,/g, ": 0,");
    this.$ctrl.datasets = this.$ctrl.datasets.replace(/: *}/g, ": 0}");

    var sets = this.$ctrl.datasets.match(/\{[^\{\}]*\}/g);

    for (var i = 0; i < sets.length; i++) {
      if (sets[i].match(/data: *\[\]/g)) {
        //console.log("no data", sets[i]);
        sets[i] = "";
      }
    }
    this.$ctrl.datasets = ("[" + (sets.join()).replace(/^,|,$/g, "") + "]");
  }

  $onInit() {
    var canvas = $("#" + this.$ctrl.esLineChartId + " .lineChart").get(0).getContext("2d");
    this.removeEmptyDatasets();
    //console.log(this.$ctrl.datasets);
    var lineChartData = {
      labels: this.$ctrl.labels ? eval(this.$ctrl.labels) : [],
      datasets: this.$ctrl.datasets ? eval(this.$ctrl.datasets) : []
    };
    if (this.$ctrl.upperOkValue) {
      lineChartData.datasets = lineChartData.datasets.concat(this.getExtraDatasets("limit", "Övre gräns", eval(this.$ctrl.upperOkValue), (lineChartData.labels).length));
    }
    if (this.$ctrl.targetValue) {
      lineChartData.datasets = lineChartData.datasets.concat(this.getExtraDatasets("target", "Målvärde", eval(this.$ctrl.targetValue), (lineChartData.labels).length));
    }
    if (this.$ctrl.lowerOkValue) {
      lineChartData.datasets = lineChartData.datasets.concat(this.getExtraDatasets("limit", "Undre gräns", eval(this.$ctrl.lowerOkValue), (lineChartData.labels).length));
    }

    var secondYAxis = false;
    for (var i = 0; i < (lineChartData.datasets).length; i++) {
      // set backgroundColor to be the same as borderColor so that tooltip and legend items look better
      (lineChartData.datasets[i]).backgroundColor = (lineChartData.datasets[i]).borderColor;
      // Activate the second y axis if a dataset uses it
      if ((lineChartData.datasets[i]).yAxisID == 'y-axis-1') {
        secondYAxis = true;
      }
      // Use standard data suffix if defined and no special data suffix is defined for the dataset
      if (!((lineChartData.datasets[i]).dataSuffix) && (this.$ctrl.chartDataValueSuffix)) {
        (lineChartData.datasets[i]).dataSuffix = this.$ctrl.chartDataValueSuffix;
      }
    }

    var xLabelSkips = this.$ctrl.esXLabelSkips ? eval(this.$ctrl.esXLabelSkips) : false;

    var chartOptions = this.getChartOptions(lineChartData, secondYAxis, xLabelSkips);
    var lineChart = new EsChart(canvas, chartOptions);
  }
}

我关注的资源：

http://tobiasahlin.com/blog/chartjs-charts-to-get-you-started/

https://www.chartjs.org/docs/latest/configuration/elements.html

https://canvasjs.com/docs/charts/chart-options/data/fill-opacity/

图片：

ChartJS线图设置背景不透明

0 个答案: