グローバルパラメータを使用してHTML Chart.Js Legendsを印刷するには

Question

Chart.jsの伝説をHTMLで印刷する方法を理解しようとしています。それらを配置します。

私は同じページにいくつかの異なるチャートを持っており、これがすべてグローバルパラメータを使用して行うことができるのだろうかと思います。 https://jsfiddle.net/js74dp2u/

Chart.defaults.global.defaultFontFamily = "'Open Sans', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"; 
Chart.defaults.global.defaultFontSize = 14; 
Chart.defaults.global.legend.position = 'bottom'; 
Chart.defaults.global.legend.labels.usePointStyle = true; 
Chart.defaults.global.legend.labels.boxWidth = 15; 
Chart.defaults.global.legend.labels.padding = 10; 
Chart.defaults.global.tooltips.backgroundColor = '#000'; 

var colors = [ 
    ['rgba(120, 199, 221, 1)', 'rgba(120, 199, 221, 0.4)'], 
    ['rgba(125, 169, 210, 1)', 'rgba(125, 169, 210, 0.4)'], 
    ['rgba(162, 108, 136, 1)', 'rgba(162, 108, 136, 0.4)'], 
    ['rgba(237, 180, 133, 1)', 'rgba(237, 180, 133, 0.4)'], 
    ['rgba(129, 151, 92, 1)', 'rgba(129, 151, 92, 0.4)'], 
    ['rgba(99, 122, 152, 1)', 'rgba(99, 122, 152, 0.4)'], 
    ['rgba(187, 156, 200, 1)', 'rgba(187, 156, 200, 0.4)'], 
    ['rgba(249, 185, 170, 1)', 'rgba(249, 185, 170, 0.4)'], 
    ['rgba(162, 76, 80, 1)', 'rgba(162, 76, 80, 0.4)'], 
    ['rgba(199, 123, 74, 1)', 'rgba(199, 123, 74, 0.4)'], 
    ['rgba(200, 139, 35, 1)', 'rgba(200, 139, 35, 0.4)'] 
]; 

var pieColors = [ 
    colors[0][0], 
    colors[1][0], 
    colors[2][0], 
    colors[3][0], 
    colors[4][0], 
    colors[5][0], 
    colors[6][0], 
    colors[7][0], 
    colors[8][0], 
    colors[9][0], 
    colors[10][0] 
]; 

var ctx = document.getElementById("myChart").getContext('2d'); 
var myChart = new Chart(ctx, { 
    type: 'pie', 
    data: { 
    labels: ["CEO, President, Chairman of the Board", "Chief Information Officer, Chief Data Officer, Chief Technology Officer, Chief Architect", "Chief Financial Officer, Chief Operations Officer, Chief Procurement Officer", "Chief Marketing Officer, Chief Commercial Officer, Chief Revenue Officer", "Chief Risk Officer, Chief Compliance Officer, Chief Legal Council", "Other C-Level Titles (Chief Innovation Officer, Chief Strategy Officer, Chief Admin Officer"], 
    datasets: [{ 
     data: [37, 17, 16, 13, 10, 7], 
     borderWidth: 2, 
     hoverBorderWidth: 10, 
     backgroundColor: pieColors, 
     hoverBackgroundColor: pieColors, 
     hoverBorderColor: pieColors, 
     borderColor: pieColors 
    }] 
    }, 

}); 

Answer 1

Chartjsは、基本的なHTMLの伝説がgenerateLegend() [全それhttp://www.chartjs.org/docs/latest/configuration/legend.html]についてのドキュメントで見つけることができると呼ばれる生成する機能を提供し、これはHTMLの伝説にもたらす唯一のもの：ここでは

は私のJSFiddleですアイテムの凡例の色です。フォントやその他のスタイルについては、CSSを使用して作成する必要があります。または、関数をオーバーライドして、チャートのデータを使用して独自のカスタムHTML凡例を作成することもできます。

例：

Chart.defaults.global.defaultFontFamily = "'Open Sans', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"; 
 
Chart.defaults.global.defaultFontSize = 14; 
 
Chart.defaults.global.legend.position = 'bottom'; 
 
Chart.defaults.global.legend.labels.usePointStyle = true; 
 
Chart.defaults.global.legend.labels.boxWidth = 15; 
 
Chart.defaults.global.legend.labels.padding = 10; 
 
Chart.defaults.global.tooltips.backgroundColor = '#000'; 
 

 
var colors = [ 
 
    ['rgba(120, 199, 221, 1)', 'rgba(120, 199, 221, 0.4)'], 
 
    ['rgba(125, 169, 210, 1)', 'rgba(125, 169, 210, 0.4)'], 
 
    ['rgba(162, 108, 136, 1)', 'rgba(162, 108, 136, 0.4)'], 
 
    ['rgba(237, 180, 133, 1)', 'rgba(237, 180, 133, 0.4)'], 
 
    ['rgba(129, 151, 92, 1)', 'rgba(129, 151, 92, 0.4)'], 
 
    ['rgba(99, 122, 152, 1)', 'rgba(99, 122, 152, 0.4)'], 
 
    ['rgba(187, 156, 200, 1)', 'rgba(187, 156, 200, 0.4)'], 
 
    ['rgba(249, 185, 170, 1)', 'rgba(249, 185, 170, 0.4)'], 
 
    ['rgba(162, 76, 80, 1)', 'rgba(162, 76, 80, 0.4)'], 
 
    ['rgba(199, 123, 74, 1)', 'rgba(199, 123, 74, 0.4)'], 
 
    ['rgba(200, 139, 35, 1)', 'rgba(200, 139, 35, 0.4)'] 
 
]; 
 

 
var pieColors = [ 
 
    colors[0][0], 
 
    colors[1][0], 
 
    colors[2][0], 
 
    colors[3][0], 
 
    colors[4][0], 
 
    colors[5][0], 
 
    colors[6][0], 
 
    colors[7][0], 
 
    colors[8][0], 
 
    colors[9][0], 
 
    colors[10][0] 
 
]; 
 

 
var ctx = document.getElementById("myChart").getContext('2d'); 
 
var myChart = new Chart(ctx, { 
 
    type: 'pie', 
 
    data: { 
 
    labels: ["CEO, President, Chairman of the Board", "Chief Information Officer, Chief Data Officer, Chief Technology Officer, Chief Architect", "Chief Financial Officer, Chief Operations Officer, Chief Procurement Officer", "Chief Marketing Officer, Chief Commercial Officer, Chief Revenue Officer", "Chief Risk Officer, Chief Compliance Officer, Chief Legal Council", "Other C-Level Titles (Chief Innovation Officer, Chief Strategy Officer, Chief Admin Officer"], 
 
    datasets: [{ 
 
     data: [37, 17, 16, 13, 10, 7], 
 
     borderWidth: 2, 
 
     hoverBorderWidth: 10, 
 
     backgroundColor: pieColors, 
 
     hoverBackgroundColor: pieColors, 
 
     hoverBorderColor: pieColors, 
 
     borderColor: pieColors 
 
    }] 
 
    }, 
 
    options: { 
 
    legend: { 
 
     display: false 
 
    } 
 
    }, 
 

 
}); 
 

 

 
var legendDiv = document.getElementById('legend'); 
 
legendDiv.innerHTML = (myChart.generateLegend());

#legend ul { 
 
    list-style: none; 
 
} 
 

 
#legend li span { 
 
    width: 10px; 
 
    height: 10px; 
 
    display: inline-block; 
 
    margin-right: 10px; 
 
    border-radius: 10px; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script> 
 
<div style="width:75%;"> 
 
    <canvas id="myChart"></canvas> 
 
</div> 
 
<div id="legend"></div>