JavaScript — как добавить легенду в круговую диаграмму
Я использую php codeigniter и создаю круговую диаграмму, используя javascript. и передача данных базы данных с использованием JSON кодирования. Моя проблема в том, как я использую легенду. для круговой диаграммы и заголовка.
Javascript
var pieData = [
{
value: sales_data[i].ans,
color:"#FF0000"
},
{
value : sales_data[i].noans,
color : "#006400"},
{
value : sales_data[i].reans,
color : "#191970"}
,
{
value : sales_data[i].noreans,
color : "#FFEA88"}
];
// get pie chart canvas
var countries=document.getElementById("countries").getContext("2d");
// draw pie chart
new Chart(countries).Pie(pieData, pieOptions);
}
}
});
Решение
Дайте этому шанс —
legendTemplate : "<ul class=\"<%=name.toLowerCase()%>-legend\"><%
for (var i=0; i<segments.length; i++){%><li><span style=\"background-color:
<%=segments[i].fillColor%>\"></span><%if(segments[i].label){%>
<%=segments[i].label%><%}%></li><%}%></ul>"Включите это как часть ваших pieOptions.
Другие решения
Обратитесь к этой документации по chart.js для получения более подробной информации о том, как использовать chart.js. Легенды, кажется, просты, но у вас есть возможность назначить метку каждому сегменту в вашей круговой диаграмме, который будет действовать как ваша легенда.
var myPieChart = new Chart(ctx[0]).Pie(data,options);
var data = [
{
value: 300,
color:"#F7464A",
highlight: "#FF5A5E",
label: "Red",
labelColor : 'white',
},
{
value: 50,
color: "#46BFBD",
highlight: "#5AD3D1",
label: "Green",
labelColor : 'white',
},
{
value: 100,
color: "#FDB45C",
highlight: "#FFC870",
label: "Yellow",
labelColor : 'white',
}
]
В этом метка действует как легенда вашей карты и выглядит как пример скрипки круговая диаграмма с использованием chart.js