একটি বারের চার্টে প্রতিটি বারের জন্য আলাদা রঙ; চার্টজেএস

Question 1

আমি যে প্রকল্পে কাজ করছি তাতে আমি চার্টজেএস ব্যবহার করছি এবং একটি বার চার্টে প্রতিটি বারের জন্য আমার আলাদা রঙ প্রয়োজন।

বার চার্ট ডেটা সেট করার উদাহরণ এখানে:

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

ভি 2 হিসাবে, আপনি কেবল 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

Chart.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;
}

আমি এটিকে ফাইলের শেষে যুক্ত করেছি এবং আমি এই ফাংশনটিকে ডান "ভরাট রঙ:" এর নীচে ডেকে আছি

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

আপনি যদি Chart.js এর উপর ভিত্তি করে " ChartNew " গ্রন্থাগারটি একবার দেখে থাকেন তবে মানগুলি এ জাতীয় হিসাবে পাস করে আপনি এটি করতে পারেন:

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

এখানে, আমি দুটি ফাংশন করে এই সমস্যাটি সমাধান করেছি।

1. গতিময় অনুবাদ () র্যান্ডম রঙ উত্পন্ন করতে

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 8

আগস্ট 2019 পর্যন্ত, Chart.js এর এখন এই কার্যকারিতাটি অন্তর্নির্মিত।

আপনার কেবল ব্যাকগ্রাউন্ড কালারে একটি অ্যারে সরবরাহ করা প্রয়োজন।

Https://www.chartjs.org/docs/latest/getting-st সূত্র / থেকে নেওয়া উদাহরণ

আগে:

  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 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);

এবং আপনার জেএসে:

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

আমি সম্প্রতি এই সমস্যাটি পেয়েছি এবং আমার সমাধান এখানে is

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,
        }
    });

লক্ষ্য করুন যে ফাংশন কলটিতে কোনও প্যারেন্টিজেস নেই এটি অ্যারে তৈরি করার পরিবর্তে কোডটি প্রতিবার ফাংশনটিতে কল করতে সক্ষম করে এটি এই কোডটি সমস্ত বারের জন্য একই রঙ ব্যবহার করতে বাধা দেয় also

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]
            }
        ]
    };