RADAR CHART - Chartjs - View Sublabels

Asked

Viewed 257 times

0

I am using the chartjs RADAR CHART (http://www.chartjs.org/docs/#radar-Chart). I wonder if we could do sublabels on the chart and how we would do that. inserir a descrição da imagem aqui

The following code: jsfiddle.net/f794khyf/5/

    var ctx = document.getElementById("canvas");

var data = {
    labels: ["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running"],
    datasets: [{
        label: "My First dataset",
        backgroundColor: "rgba(179,181,198,0.2)",
        borderColor: "rgba(179,181,198,1)",
        pointBackgroundColor: "rgba(179,181,198,1)",
        pointBorderColor: "#fff",
        pointHoverBackgroundColor: "#fff",
        pointHoverBorderColor: "rgba(179,181,198,1)",
        data: [65, 59, 90, 81, 56, 55, 40]
    }, {
        label: "My Second dataset",
        backgroundColor: "rgba(255,99,132,0.2)",
        borderColor: "rgba(255,99,132,1)",
        pointBackgroundColor: "rgba(255,99,132,1)",
        pointBorderColor: "#fff",
        pointHoverBackgroundColor: "#fff",
        pointHoverBorderColor: "rgba(255,99,132,1)",
        data: [28, 48, 40, 19, 96, 27, 100]
    }]
};

var myRadarChart = new Chart(ctx, {
    type: 'radar',
    data: data,
    options: {
        scale: {
            ticks: {
                display: false
            }
        },
        animation: {
            duration: 500,
            easing: "easeOutQuart",
            onComplete: function() {
                var ctx = this.chart.ctx;
                ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontFamily, 'normal', Chart.defaults.global.defaultFontFamily);
                ctx.textAlign = 'center';
                ctx.fillStyle = 'black';

                this.data.datasets.forEach(function(dataset) {
                    for (var i = 0; i < dataset.data.length; i++) {
                        var model = dataset._meta[0].data[i]._model;
                        ctx.fillText(dataset.data[i], model.x, model.y - 2);
                    }
                });
            }
        }
    }
    }
    );
<canvas id="canvas"></canvas>

  • It would be helpful if you post your code, so we can analyze it better and help you

  • http://jsfiddle.net/f794khyf/5/

1 answer

0


tries to do so:

labels: [['Eating','Segunda label','terceira label'], "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running"],
  • The problem was that I was using version 2.3. And this fix to allow "multiline" Labels was only made from 2.5. http://jsfiddle.net/f794khyf/8/

Browser other questions tagged

You are not signed in. Login or sign up in order to post.