Question

我有一个chart.js条，我想给它们从左到右的颜色，如下所示，这就是Jet Colormap

我在Google上进行了研究，因此我发现一些来源帮助我应用了如下所示的颜色模式这是我在下面尝试的。我了解了.addColorStop(offset,color)属性，并帮助我如下添加数据点颜色

    purple_orange_gradient.addColorStop(0, "#80b6f4");
    purple_orange_gradient.addColorStop(0.2, "#94d973");
    purple_orange_gradient.addColorStop(0.5, "#fad874");
    purple_orange_gradient.addColorStop(1, "#f49080");

我发现此website提到了如何将某些颜色模式及其数据点应用于如下

但是我不知道喷射彩色图的数据点是什么。您能帮我直接找到或分享给我吗？

这是我在下面尝试的内容

App.component.ts

export class AppComponent implements AfterViewInit{
  @ViewChild("myChart", {static: false}) myChart: ElementRef;

   ngAfterViewInit() {
    let colormap = require('colormap')
    let colors = colormap({
        colormap: 'jet',
        nshades: 10,
        format: 'hex',
        alpha: 1
    })
    const ctx = (<HTMLCanvasElement>this.myChart.nativeElement).getContext('2d');
    const purple_orange_gradient = ctx.createLinearGradient(500, 0, 100, 0);
    purple_orange_gradient.addColorStop(0, "#80b6f4");
    purple_orange_gradient.addColorStop(0.2, "#94d973");
    purple_orange_gradient.addColorStop(0.5, "#fad874");
    purple_orange_gradient.addColorStop(1, "#f49080");
    const bar_chart = new Chart(ctx, {
      type: "bar",
      data: {
        labels: ["JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL"],
        datasets: [{
            label: "Data",
            borderColor: purple_orange_gradient,
            pointBorderColor: purple_orange_gradient,
            pointBackgroundColor: purple_orange_gradient,
            pointHoverBackgroundColor: purple_orange_gradient,
            pointHoverBorderColor: purple_orange_gradient,
            pointBorderWidth: 10,
            pointHoverRadius: 10,
            pointHoverBorderWidth: 1,
            pointRadius: 3,
            fill: true,
            backgroundColor: purple_orange_gradient,
            borderWidth: 4,
            data: [100, 120, 150, 170, 180, 170, 160]
        }]
    },
    options: {
        legend: {
            position: "bottom"
        },
        scales: {
            yAxes: [{
                ticks: {
                    fontColor: "rgba(0,0,0,0.5)",
                    fontStyle: "bold",
                    beginAtZero: true,
                    maxTicksLimit: 5,
                    padding: 20
                },
                gridLines: {
                    drawTicks: false,
                    display: false
                }
}],
            xAxes: [{
                gridLines: {
                    zeroLineColor: "transparent"
},
                ticks: {
                    padding: 20,
                    fontColor: "rgba(0,0,0,0.5)",
                    fontStyle: "bold"
                }
            }]
        }
    }
    })
  }
  }

App.Component.html

<div>
  <div style="display: block">
    <canvas id=”myChart” #myChart></canvas>
  </div>
</div>

如何获得色彩图的关键数据点

0 个答案: