Блог

Я строю несколько гистограмм по времени в месяцах, используя Flask ChartJS. Я нахожу, что цвет этикеток повторяется после 12. У меня есть 17 баров вместе на каждый месяц, и 5 из них имеют повторяющиеся цвета.

Я пытаюсь расширить количество цветов, используя backgroundColor несколькими способами. Он показывает разные результаты (цвета всех баров за следующие месяцы меняются). Я не могу расширить цвета в нескольких полосах с 12 до 17 в течение одного месяца.

Могу ли я каким-либо образом использовать переменную в backgroundColor для решения проблемы (в приведенном ниже коде вы можете увидеть в комментарии)

Официальная документация Chart js также ничего не упоминает о расширении цветов в нескольких столбцах.

Пожалуйста, предложите что-нибудь!

 function build_stats_dataset() {
    var dt = []

    for (var i = 0; i < graph_data["labels"].length; i  ) {
        dt.push(
            {
                label: graph_datasets["labels"][i], // column name
                data: graph_datasets["data_by_month"][i], // data in that column
                fill: false,
                // backgroundColor: rgba(15 * i, 80   10 * i, 160   15 * i, 0.1)
            }
        )
    }
    return dt;
}
 

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

 //function to generate the random number
getRndNumber(min:number , max:number) {
    return Math.floor(Math.random() * (max - min   1) )   min;
}   

//generate a random color in rgba format
color = 'rgba('  this.getRndNumber(0,255)  ', '  this.getRndNumber(0,255)  ', '  this.getRndNumber(0,255);
//using that color to set the backgroundColor
dataSet.backgroundColor = color  ', 0.7)';
 

Редактировать:
Да, я могу поделиться кодом, в котором я заполняю диаграмму(в машинописном виде), но единственное, что здесь имеет значение, — это то, что я использую его в объекте ChartDataSets, я думаю.

     populateChart(answerReportList: AnswerReport[]) : ChartDataSets[]
    {      
       var ChartDataSets: ChartDataSets[] = [];
        answerReportList.forEach(report=>{
            var dataSet: ChartDataSets = {};
            dataSet.data = [Math.round((report.resultCases * 100 /report.resultTotal) * 10) / 10];
            dataSet.label = report.answerText;
            var color: string;
            color = 'rgba('  this.getRndNumber(0,255)  ', '  this.getRndNumber(0,255)  ', '  this.getRndNumber(0,255);
            dataSet.backgroundColor = color  ', 0.7)';
            dataSet.hoverBackgroundColor = color  ', 1)';
            ChartDataSets.push(dataSet);
        });  

        return ChartDataSets;      
    } 
 

Забыл упомянуть, что наборы диаграмм-это интерфейс из chart.js:

 import { ChartOptions, ChartType, ChartDataSets } from 'chart.js';