在Angular的Plotly js中设置自定义调色板

npm install plotly.js @types/plotly.js --save

import { Component, OnInit } from '@angular/core';
import * as Plotly from 'plotly.js-dist';

@Component({
  selector: 'app-custom-plot',
  templateUrl: './custom-plot.component.html',
  styleUrls: ['./custom-plot.component.css']
})
export class CustomPlotComponent implements OnInit {
  customPalette = ['#1f77b4', '#ff7f0e', '#2ca02c', '#d62728'];

  ngOnInit() {
    this.createPlot();
  }

  createPlot() {
    const data = [
      { x: [1, 2, 3], y: [4, 5, 6], mode: 'lines', marker: { color: this.customPalette[0] } },
      { x: [1, 2, 3], y: [6, 5, 4], mode: 'lines', marker: { color: this.customPalette[1] } }
    ];

    const layout = {
      title: 'Custom Palette Example',
      plot_bgcolor: '#f0f0f0',
      paper_bgcolor: '#ffffff'
    };

    Plotly.newPlot('plot', data, layout);
  }
}

<div id="plot" style="width: 100%; height: 400px;"></div>