Как установить одинаковые borderColor и backgroundColor на графике js javascript

Question

Я реализовал линейную диаграмму, используя диаграмму js, Каждый раз, когда диаграмма загружается, генерируя случайные цвета, но как установить один и тот же цвет для backgroundColor and borderColor

набора данных выглядит,

var data = [{
      label: "records",
      data: [2, 4 ,20,10],
      fill: false,
      backgroundColor: this.generateColor(),
      borderColor: this.generateColor(),
      borderWidth: 1
    },{
      label: "amount",
      data: [100, 200, 500,50],
      fill: false,
      backgroundColor: this.generateColor(),
      borderColor: this.generateColor(),
      borderWidth: 1
    }

}]
  generateColor = () => {
    var letters = '0123456789ABCDEF';
    var color = '#';
    for (var i = 0; i < 6; i++) {
      color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
  }

Ожидается: borderColor и backgroundColor должны совпадать

Answer 1

поэтому причина, по которой цвет границы и цвет фона не совпадают, заключается в том, что вы вызываете функцию для каждого свойства, для которого вам нужен цвет. одни только функции не имеют какого-либо состояния, поэтому сама функция не может вспомнить, что функция возвращала ранее.

Лучший способ, который я мог бы себе представить, это также сохраняет хороший декларативный способ. вы выложили свои данные с помощью класса.

class GenerateColorPairs {
    constructor(numOfColorPairs) {
        this.tickCycle = 2
        this.currentTick = 0
        this.colorSetIndex = 0

        this.colorSet = []

        const letters = '0123456789ABCDEF';
        for (let i = 0; i < numOfColorPairs; i++) {
            let color = '#';
            for (let j = 0; j < 6; j++) {
                color += letters[Math.floor(Math.random() * 16)];
            }
            debugger;
            this.colorSet.push(color)
        }
    }

    tick() {
        if (this.currentTick < this.tickCycle) {

            this.currentTick += 1

        } else if (this.currentTick === this.tickCycle) {

            if (this.colorSetIndex === this.numOfColorPairs) {
                throw new Error(`
            function has been called more times than 
            the 'numOfColorPairs' x2\n To be able to use this 
            function more than ${this.numOfColorPairs} times, 
            pass a higher value when instanciating to the class 
            constructor
          `)
            }

            this.colorSetIndex += 1
            this.currentTick = 0

        }
    }

    generateColor() {
        this.tick()
        return this.colorSet[this.colorSetIndex];
    }

}

var colors = new GenerateColorPairs(2)

var data = [{
    label: "records",
    data: [2, 4, 20, 10],
    fill: false,
    backgroundColor: colors.generateColor(),
    borderColor: colors.generateColor(),
    borderWidth: 1
}, {
    label: "amount",
    data: [100, 200, 500, 50],
    fill: false,
    backgroundColor: colors.generateColor(),
    borderColor: colors.generateColor(),
    borderWidth: 1
}];

console.log(data)

Это гораздо более многословно, чем другие опции, упомянутые здесь, но позволяет вам объявлять все ваши данные в одном операторе и не проходить их через фабрику.

Answer 2

Самый простой способ - просто сохранить сгенерированный цвет в переменной, на которую вы можете ссылаться для каждого объекта (например, когда вы отображаете его).

Но если по какой-то причине вы не хотите этого делать чтобы потом вы могли создать функцию фабрики объектов:

const buildObj = obj => {
    const color = generateColor();
    const o = { ...obj, backgroundColor: color, borderColor: color };
    return o;
}

и затем вызвать ее для генерации новых объектов:

const mappedData = data.map(o => buildObj(o))

Теперь каждый объект будет иметь уникальный цвет, но backgroundColor и borderColor каждого объекта будут одинаковыми.

Answer 3

Итак, проблема в том, что вы получаете случайный цвет каждый раз, когда вызываете функцию. Попробуйте создать цвет один раз для каждого элемента в вашем массиве. Простая идея:

  generateColor = () => {
    var letters = '0123456789ABCDEF';
    var color = '#';
    for (var i = 0; i < 6; i++) {
      color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
  }

var data = [{
      label: "records",
      data: [2, 4 ,20,10],
      fill: false,
      borderWidth: 1
    },{
      label: "amount",
      data: [100, 200, 500,50],
      fill: false,
      borderWidth: 1
    }].map(v => {
                var color = generateColor(); 
                return {...v, backgroundColor: color, borderColor: color}
           })

Answer 4

Вам просто нужно объявить глобальную переменную и использовать ее несколько раз.

const globalColor = this.generateColor();
var data = [{
      label: "records",
      data: [2, 4 ,20,10],
      fill: false,
      backgroundColor: globalColor ,
      borderColor: globalColor ,
      borderWidth: 1
    },{
      label: "amount",
      data: [100, 200, 500,50],
      fill: false,
      backgroundColor: globalColor ,
      borderColor: globalColor ,
      borderWidth: 1
    }

}]
  generateColor = () => {
    var letters = '0123456789ABCDEF';
    var color = '#';
    for (var i = 0; i < 6; i++) {
      color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
  }

Надеюсь, это поможет