Question

我的chart.js有一个奇怪的配置，因为正在输入的数据以及线条颜色。但是我想知道是否有人能指出我如何定制传奇的方向：

$(document).ready(function(){ 

$.ajax({ 
url : "../acredash/teamData.php", 
timeout: 4000,
type : "GET", 
success :function(data){ 
console.log(data); 


var chartata = { 
labels: [ 
"Strategic Development and Ownership", 
"Driving change through others", 
"Exec Disposition", 
"Commercial Acumen", 
"Develops High Performance Teams", 
"Innovation and risk taking", 
"Global Leadership", 
"Industry Leader" 
]}; 

var ctx = $("#mycanvas"); 

var config = { 
    type: 'radar', 
    data: chartata, 
    animationEasing: 'linear',
        options: {
         legend: {
            display: true,
            position: 'bottom'
        },
         tooltips: {
            enabled: true
        },
        scale: {
            ticks: {
                fontSize: 15,
                beginAtZero: true,
                stepSize: 1
            }
        } 

    },
}, 

LineGraph = new Chart(ctx, config); 

var colorArray = [
    ["#7149a5", false],
    ["#57B6DD", false],
    ["#36bfbf", false],
    ["#69bd45", false],
    ['#9adfdf', false],
    ['#c6b6db' ,false],
    ["#5481B1", false],
    ['#8d6db7', false],
    ['#d2ebc7', false],
    ["#6168AC", false]
];


for (var i in data) { 
    tmpscore=[]; 
    tmpscore.push(data[i].score_1); 
    tmpscore.push(data[i].score_2); 
    tmpscore.push(data[i].score_3); 
    tmpscore.push(data[i].score_4); 
    tmpscore.push(data[i].score_5); 
    tmpscore.push(data[i].score_6); 
    tmpscore.push(data[i].score_7); 
    tmpscore.push(data[i].score_8); 

    var color, done = false;
    while (!done) {
        var test = colorArray[parseInt(Math.random() * 10)];
        if (!test[1]) {
            color = test[0];
            colorArray[colorArray.indexOf(test)][1] = true;
            done = !done;
        }
    }


newDataset = { 
    label: data[i].firstName+' '+data[i].lastName, 
     borderColor: color,
    backgroundColor: "rgba(0,0,0,0)", 
    data: tmpscore, 
}; 

    config.data.datasets.push(newDataset); 

} 

LineGraph.update(); 
},  
}); 
});

由于我的图表生成方式，我没有太多运气。它只使用了默认的图例而且它很麻烦。我想控制它。

Answer 1

步骤1：在选项上为图例设置回调

legendCallback: function(chart) {
        var legendHtml = [];
        legendHtml.push('<ul>');
        var item = chart.data.datasets[0];
        for (var i=0; i < item.data.length; i++) {
            legendHtml.push('<li>');
            legendHtml.push('<span></span>');//add what ever you want :-p
            legendHtml.push('<span class="chart-legend-label-text">' + chart.data.labels[i]+'</span>');
            legendHtml.push('</li>');
        }

        legendHtml.push('</ul>');
        return legendHtml.join("");
    },legend:false,

步骤2：将您的图例放在您想要的任何地方：-p

<div id="my-legend-con" class="legend-con"></div>

步骤3：初始化图例。

$('#my-legend-con').html(myChartName.generateLegend());

步骤3：做任何你想做的事...

Chart.js图例定制

1 个答案: