ChartNew, ограничение количества надписей в графике Pie

30.12.2015 Павел Грибов WEB

Задача: при отрисовке графика Pie, показывать надписи только для значимых значений.

Решение: повесим обработчик вывода на inGraphDataFontSize

Код:

function setFontSize(area,ctx,data,statData,posi,posj,othervars) {
	if(statData[posi].v6<=3) return(0);          // do not display the data if the slice is less than 5 % 
	else if (statData[posi].v6<10)return(10);    // display with font size=10 when slice is between 5 and 10 %
	else return(20);                             // otherwise, display with font size= 20 
}    
var ctx = document.getElementById("myChart").getContext("2d");
var startWithDataset =1;
var startWithData =1;
var opt1 = {
      animationStartWithDataset : startWithDataset,
      animationStartWithData : startWithData,
      animateRotate : true,
      animationByData : true,
      animationSteps : 50,
      graphTitle : "Поступления д/с в разрезе систем",
      legend : true,
      inGraphDataShow : true,
      animationEasing: "linear",
      annotateDisplay : true,
      spaceBetweenBar : 5,
      graphTitleFontSize: 18,
      responsive : true,
      maintainAspectRatio : true,
      inGraphDataFontSize: setFontSize
      
  };

function setFontSize(area,ctx,data,statData,posi,posj,othervars) {

if(statData[posi].v6<=3) return(0); // do not display the data if the slice is less than 5 %

else if (statData[posi].v6<10)return(10); // display with font size=10 when slice is between 5 and 10 %

else return(20); // otherwise, display with font size= 20

}

var ctx = document.getElementById("myChart").getContext("2d");

var startWithDataset =1;

var startWithData =1;

var opt1 = {

animationStartWithDataset : startWithDataset,

animationStartWithData : startWithData,

animateRotate : true,

animationByData : true,

animationSteps : 50,

graphTitle : "Поступления д/с в разрезе систем",

legend : true,

inGraphDataShow : true,

animationEasing: "linear",

annotateDisplay : true,

spaceBetweenBar : 5,

graphTitleFontSize: 18,

responsive : true,

maintainAspectRatio : true,

inGraphDataFontSize: setFontSize

};

Получилось:

Оставить комментарий ChartNew, ChartNew.js, pie, количество надписей

Пн	Вт	Ср	Чт	Пт	Сб	Вс
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30

ChartNew, ограничение количества надписей в графике Pie

Добавить комментарий Отменить ответ