बार चार्ट में प्रत्येक बार के लिए अलग-अलग रंग; ChartJS

Question 1

मैं एक प्रोजेक्ट में ChartJS का उपयोग कर रहा हूं, जिस पर मैं काम कर रहा हूं और मुझे बार चार्ट में प्रत्येक बार के लिए एक अलग रंग की आवश्यकता है।

यहां बार चार्ट डेटा सेट का एक उदाहरण दिया गया है:

var barChartData = {
  labels: ["001", "002", "003", "004", "005", "006", "007"],
  datasets: [{
    label: "My First dataset",
    fillColor: "rgba(220,220,220,0.5)", 
    strokeColor: "rgba(220,220,220,0.8)", 
    highlightFill: "rgba(220,220,220,0.75)",
    highlightStroke: "rgba(220,220,220,1)",
    data: [20, 59, 80, 81, 56, 55, 40]
  }]
};

क्या प्रत्येक पट्टी को अलग तरीके से पेंट करने का कोई तरीका है?

Question 2

V2 के रूप में, आप बस backgroundColorसंपत्ति के माध्यम से प्रत्येक बार के लिए एक रंग के अनुरूप मूल्यों की एक सरणी निर्दिष्ट कर सकते हैं:

datasets: [{
  label: "My First dataset",
  data: [20, 59, 80, 81, 56, 55, 40],
  backgroundColor: ["red", "blue", "green", "blue", "red", "blue"], 
}],

यह भी संभव है borderColor, hoverBackgroundColor, hoverBorderColor।

बार चार्ट डेटासेट गुण पर प्रलेखन से :

कुछ गुणों को एक सरणी के रूप में निर्दिष्ट किया जा सकता है। यदि ये एक सरणी मान पर सेट हैं, तो पहला मान पहले बार पर लागू होता है, दूसरा मान दूसरे बार पर, और इसी तरह।

Question 3

समाधान: नए मान सेट करने के लिए अद्यतन विधि को कॉल करें:

var barChartData = {
    labels: ["January", "February", "March"],
    datasets: [
        {
            label: "My First dataset",
            fillColor: "rgba(220,220,220,0.5)", 
            strokeColor: "rgba(220,220,220,0.8)", 
            highlightFill: "rgba(220,220,220,0.75)",
            highlightStroke: "rgba(220,220,220,1)",
            data: [20, 59, 80]
        }
    ]
};

window.onload = function(){
    var ctx = document.getElementById("mycanvas").getContext("2d");
    window.myObjBar = new Chart(ctx).Bar(barChartData, {
          responsive : true
    });

    //nuevos colores
    myObjBar.datasets[0].bars[0].fillColor = "green"; //bar 1
    myObjBar.datasets[0].bars[1].fillColor = "orange"; //bar 2
    myObjBar.datasets[0].bars[2].fillColor = "red"; //bar 3
    myObjBar.update();
}

Question 4

चार्ट में देखने के बाद। Bar.js फ़ाइल मैं हल खोजने में कामयाब रहा। मैंने यादृच्छिक रंग उत्पन्न करने के लिए इस फ़ंक्शन का उपयोग किया है:

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

मैंने इसे फ़ाइल के अंत में जोड़ दिया है और मैंने इस फ़ंक्शन को "fillColor:" के तहत ठीक कहा है

helpers.each(dataset.data,function(dataPoint,index){
                    //Add a new point for each piece of data, passing any required data to draw.

तो अब यह इस तरह दिखता है:

helpers.each(dataset.data,function(dataPoint,index){
                    //Add a new point for each piece of data, passing any required data to draw.

                    datasetObject.bars.push(new this.BarClass({
                        value : dataPoint,
                        label : data.labels[index],
                        datasetLabel: dataset.label,
                        strokeColor : dataset.strokeColor,
                        fillColor : getRandomColor(),
                        highlightFill : dataset.highlightFill || dataset.fillColor,
                        highlightStroke : dataset.highlightStroke || dataset.strokeColor
                    }));
                },this);

और यह काम करता है मैं प्रत्येक पट्टी के लिए अलग रंग मिलता है।

Question 5

आप पुस्तकालय "पर एक नज़र डालें तो ChartNew " बनाता है जो Chart.js पर तुम इतनी तरह एक सरणी के रूप में में मान पास कर ऐसा कर सकते हैं:

var data = {
    labels: ["Batman", "Iron Man", "Captain America", "Robin"],
    datasets: [
        {
            label: "My First dataset",
            fillColor: ["rgba(220,220,220,0.5)", "navy", "red", "orange"],
            strokeColor: "rgba(220,220,220,0.8)",
            highlightFill: "rgba(220,220,220,0.75)",
            highlightStroke: "rgba(220,220,220,1)",
            data: [2000, 1500, 1750, 50]
        }
    ]
};

Question 6

आप इस फ़ंक्शन को कॉल कर सकते हैं जो प्रत्येक सलाखों के लिए यादृच्छिक रंग उत्पन्न करता है

var randomColorGenerator = function () { 
    return '#' + (Math.random().toString(16) + '0000000').slice(2, 8); 
};

var barChartData = {
        labels: ["001", "002", "003", "004", "005", "006", "007"],
        datasets: [
            {
                label: "My First dataset",
                fillColor: randomColorGenerator(), 
                strokeColor: randomColorGenerator(), 
                highlightFill: randomColorGenerator(),
                highlightStroke: randomColorGenerator(),
                data: [20, 59, 80, 81, 56, 55, 40]
            }
        ]
    };

Question 7

अगस्त 2019 तक, चार्ट.जेएस में अब यह कार्यक्षमता निर्मित है।

आपको बस बैकग्राउंड कॉर्नर को एक सरणी प्रदान करनी होगी।

Https://www.chartjs.org/docs/latest/getting-started/ से लिया गया उदाहरण

इससे पहले:

  data: {
        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
        datasets: [{
            label: 'My First dataset',
            backgroundColor: 'rgb(255, 99, 132)',
            borderColor: 'rgb(255, 99, 132)',
            data: [0, 10, 5, 2, 20, 30, 45]
        }]
    },

उपरांत:

  data: {
        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
        datasets: [{
            label: 'My First dataset',
            backgroundColor: ['rgb(255, 99, 132)','rgb(0, 255, 0)','rgb(255, 99, 132)','rgb(128, 255, 0)','rgb(0, 255, 255)','rgb(255, 255, 0)','rgb(255, 255, 128)'],
            borderColor: 'rgb(255, 99, 132)',
            data: [0, 10, 5, 2, 20, 30, 45]
        }]
    },

मैंने अभी इस विधि का परीक्षण किया है और यह काम करता है। प्रत्येक पट्टी का एक अलग रंग होता है।

Question 8

यहाँ, मैंने दो कार्य करके इस समस्या को हल किया।

1. randomColors () यादृच्छिक रंग उत्पन्न करने के लिए

function dynamicColors() {
    var r = Math.floor(Math.random() * 255);
    var g = Math.floor(Math.random() * 255);
    var b = Math.floor(Math.random() * 255);
    return "rgba(" + r + "," + g + "," + b + ", 0.5)";
}

2. पूलकोल () रंगों की सरणी बनाने के लिए

function poolColors(a) {
    var pool = [];
    for(i = 0; i < a; i++) {
        pool.push(dynamicColors());
    }
    return pool;
}

फिर, बस इसे पास करें

datasets: [{
    data: arrData,
    backgroundColor: poolColors(arrData.length),
    borderColor: poolColors(arrData.length),
    borderWidth: 1
}]

Question 9

यादृच्छिक रंग उत्पन्न करें;

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

और प्रत्येक रिकॉर्ड के लिए इसे कॉल करें;

function getRandomColorEachEmployee(count) {
    var data =[];
    for (var i = 0; i < count; i++) {
        data.push(getRandomColor());
    }
    return data;
}

अंत में रंग सेट करें;

var data = {
    labels: jsonData.employees, // your labels
    datasets: [{
        data: jsonData.approvedRatios, // your data
        backgroundColor: getRandomColorEachEmployee(jsonData.employees.length)
    }]
};

Question 10

यहां रंग-हैश का उपयोग करके लगातार यादृच्छिक रंग उत्पन्न करने का एक तरीका है

const colorHash = new ColorHash()

const datasets = [{
  label: 'Balance',
  data: _.values(balances),
  backgroundColor: _.keys(balances).map(name => colorHash.hex(name))
}]

Question 11

यहां बताया गया है कि मैंने कैसे सौदा किया: मैंने एक सरणी "रंगों" को धकेल दिया, जिसमें समान संख्या में प्रविष्टियां होती हैं, जो कि आंकड़ों की संख्या से अधिक होती हैं। इसके लिए मैंने स्क्रिप्ट के अंत में एक फ़ंक्शन "getRandomColor" जोड़ा। आशा करता हूँ की ये काम करेगा...

for (var i in arr) {
    customers.push(arr[i].customer);
    nb_cases.push(arr[i].nb_cases);
    colors.push(getRandomColor());
}

window.onload = function() {
    var config = {
        type: 'pie',
        data: {
            labels: customers,
            datasets: [{
                label: "Nomber of cases by customers",
                data: nb_cases,
                fill: true,
                backgroundColor: colors 
            }]
        },
        options: {
            responsive: true,
            title: {
                display: true,
                text: "Cases by customers"
            },
        }
    };

    var ctx = document.getElementById("canvas").getContext("2d");
    window.myLine = new Chart(ctx, config);
};

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

Question 12

यदि आप NewChart.js का उपयोग करने में सक्षम नहीं हैं, तो आपको केवल सरणी का उपयोग करके रंग सेट करने के तरीके को बदलने की आवश्यकता है। Chart.js के अंदर सहायक पुनरावृत्ति ज्ञात करें:

इस पंक्ति को बदलें:

fillColor : dataset.fillColor,

इसके लिए एक:

fillColor : dataset.fillColor[index],

परिणामी कोड:

//Iterate through each of the datasets, and build this into a property of the chart
  helpers.each(data.datasets,function(dataset,datasetIndex){

    var datasetObject = {
      label : dataset.label || null,
      fillColor : dataset.fillColor,
      strokeColor : dataset.strokeColor,
      bars : []
    };

    this.datasets.push(datasetObject);

    helpers.each(dataset.data,function(dataPoint,index){
      //Add a new point for each piece of data, passing any required data to draw.
      datasetObject.bars.push(new this.BarClass({
        value : dataPoint,
        label : data.labels[index],
        datasetLabel: dataset.label,
        strokeColor : dataset.strokeColor,
        //Replace this -> fillColor : dataset.fillColor,
        // Whith the following:
        fillColor : dataset.fillColor[index],
        highlightFill : dataset.highlightFill || dataset.fillColor,
        highlightStroke : dataset.highlightStroke || dataset.strokeColor
      }));
    },this);

  },this);

और आपके js में:

datasets: [
                {
                  label: "My First dataset",
                  fillColor: ["rgba(205,64,64,0.5)", "rgba(220,220,220,0.5)", "rgba(24,178,235,0.5)", "rgba(220,220,220,0.5)"],
                  strokeColor: "rgba(220,220,220,0.8)",
                  highlightFill: "rgba(220,220,220,0.75)",
                  highlightStroke: "rgba(220,220,220,1)",
                  data: [2000, 1500, 1750, 50]
                }
              ]

Question 13

इसे इस्तेमाल करे :

  function getChartJs() {
        **var dynamicColors = function () {
            var r = Math.floor(Math.random() * 255);
            var g = Math.floor(Math.random() * 255);
            var b = Math.floor(Math.random() * 255);
            return "rgb(" + r + "," + g + "," + b + ")";
        }**

        $.ajax({
            type: "POST",
            url: "ADMIN_DEFAULT.aspx/GetChartByJenisKerusakan",
            data: "{}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (r) {
                var labels = r.d[0];
                var series1 = r.d[1];
                var data = {
                    labels: r.d[0],
                    datasets: [
                        {
                            label: "My First dataset",
                            data: series1,
                            strokeColor: "#77a8a8",
                            pointColor: "#eca1a6"
                        }
                    ]
                };

                var ctx = $("#bar_chart").get(0).getContext('2d');
                ctx.canvas.height = 300;
                ctx.canvas.width = 500;
                var lineChart = new Chart(ctx).Bar(data, {
                    bezierCurve: false,
                    title:
                      {
                          display: true,
                          text: "ProductWise Sales Count"
                      },
                    responsive: true,
                    maintainAspectRatio: true
                });

                $.each(r.d, function (key, value) {
                    **lineChart.datasets[0].bars[key].fillColor = dynamicColors();
                    lineChart.datasets[0].bars[key].fillColor = dynamicColors();**
                    lineChart.update();
                });
            },
            failure: function (r) {
                alert(r.d);
            },
            error: function (r) {
                alert(r.d);
            }
        });
    }

Question 14

यह वर्तमान संस्करण में मेरे लिए काम करता है 2.7.1:

function colorizePercentageChart(myObjBar) {

var bars = myObjBar.data.datasets[0].data;
console.log(myObjBar.data.datasets[0]);
for (i = 0; i < bars.length; i++) {

    var color = "green";

    if(parseFloat(bars[i])  < 95){
        color = "yellow";
    }
    if(parseFloat(bars[i])  < 50){
         color = "red";
    }

    console.log(color);
    myObjBar.data.datasets[0].backgroundColor[i] = color;

}
myObjBar.update();

}

Question 15

यदि आप प्रत्येक बार के लिए यादृच्छिक रंगों के साथ एक सूची प्राप्त करना चाहते हैं, तो दूसरा उत्तर दें, यहां एक त्वरित समाधान है:

function getRandomColor(n) {
    var letters = '0123456789ABCDEF'.split('');
    var color = '#';
    var colors = [];
    for(var j = 0; j < n; j++){
        for (var i = 0; i < 6; i++ ) {
            color += letters[Math.floor(Math.random() * 16)];
        }
        colors.push(color);
        color = '#';
    }
    return colors;
}

अब आप डेटा में बैकग्राउंड फ़ील्ड में इस फ़ंक्शन का उपयोग कर सकते हैं:

data: {
        labels: count[0],
        datasets: [{
            label: 'Registros en BDs',
            data: count[1],
            backgroundColor: getRandomColor(count[1].length)
        }]
}

Question 16

मुझे हाल ही में यह मुद्दा मिला है, और यहाँ मेरा समाधान है

var labels = ["001", "002", "003", "004", "005", "006", "007"];
var data = [20, 59, 80, 81, 56, 55, 40];
for (var i = 0, len = labels.length; i < len; i++) {
   background_colors.push(getRandomColor());// I use @Benjamin method here
}

var barChartData = {
  labels: labels,
  datasets: [{
    label: "My First dataset",
    fillColor: "rgba(220,220,220,0.5)", 
    strokeColor: "rgba(220,220,220,0.8)", 
    highlightFill: "rgba(220,220,220,0.75)",
    highlightStroke: "rgba(220,220,220,1)",
    backgroundColor: background_colors,
    data: data
  }]
};

Question 17

निम्नलिखित पुल अनुरोध के आधार पर कोड :

datapoint.color = 'hsl(' + (360 * index / data.length) + ', 100%, 50%)';

Question 18

यदि आप जानते हैं कि आपको कौन से रंग चाहिए, तो आप सरणी में रंग गुण निर्दिष्ट कर सकते हैं, जैसे:

    backgroundColor: [
    'rgba(75, 192, 192, 1)',
    ...
    ],
    borderColor: [
    'rgba(75, 192, 192, 1)',
    ...
    ],

Question 19

मैंने जो किया है, वह एक यादृच्छिक रंग जनरेटर का निर्माण करता है जैसा कि यहाँ कई ने सुझाया है

function dynamicColors() {
        var r = Math.floor(Math.random() * 255);
        var g = Math.floor(Math.random() * 255);
        var b = Math.floor(Math.random() * 255);
        return "rgba(" + r + "," + g + "," + b + ", 0.5)";
    }

और फिर इस कोडित किया गया

var chartContext = document.getElementById('line-chart');
    let lineChart = new Chart(chartContext, {
        type: 'bar',
        data : {
            labels: <?php echo json_encode($names); ?>,
            datasets: [{
                data : <?php echo json_encode($salaries); ?>,
                borderWidth: 1,
                backgroundColor: dynamicColors,
            }]
        }
        ,
        options: {
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero: true
                    }
                }]
            },
            responsive: true,
            maintainAspectRatio: false,
        }
    });

ध्यान दें कि फ़ंक्शन कॉल में कोई परांठे नहीं है, यह कोड को हर बार फ़ंक्शन को कॉल करने में सक्षम बनाता है, इसके बजाय एक सरणी बनाने के लिए यह सभी बार के लिए समान रंग का उपयोग करने से कोड को रोकता है

Question 20

आप के साथ आसानी से उत्पन्न कर सकते हैं livegap चार्ट
बार मेनू से Mulicolors करें

_{(स्रोत: livegap.com )}

** इस्तेमाल की जाने वाली चार्ट लाइब्रेरी में चार्टन्यू.जेएस चार्ट का संशोधित संस्करण है। चार्ट लाइब्रेरी के
साथ जेएस लाइब्रेरी। जेएस कोड कुछ इस तरह होगा

var barChartData = {
        labels: ["001", "002", "003", "004", "005", "006", "007"],
        datasets: [
            {
                label: "My First dataset",
                fillColor: ["rgba(0,10,220,0.5)","rgba(220,0,10,0.5)","rgba(220,0,0,0.5)","rgba(120,250,120,0.5)" ],
                strokeColor: "rgba(220,220,220,0.8)", 
                highlightFill: "rgba(220,220,220,0.75)",
                highlightStroke: "rgba(220,220,220,1)",
                data: [20, 59, 80, 81, 56, 55, 40]
            }
        ]
    };