2015-04-28 4 views
3

Как вы меняете цвет текста пончика и цвета наполнителя пончика отдельно? У меня есть что-то вроде этого:Цвет текста donut текста Chart.js

var color = [ "#3F9F3F", "#FFFFFF" ]; 
var chartData = { 
    label : myLabels, 
    data : myData, 
    colors : color 
}; 

Второй атрибут цвета переопределяет все, что я пробовал. Какое свойство, специально для пончиков, исправит это?

enter image description here

Я хотел бы цвет текста будет отличаться от черного цвета в графике.

Edit:

Это jsfiddle я обнаружил, что показывает принципиальную схему.

http://jsfiddle.net/mayankcpdixit/6xV78/

Вопрос в том, как изменить цвет шрифта внутри бублика?

Изменить 2:

Реализованный цвет текста внутри пончиков, в то время как влияние вторичного цвета, был на самом деле окрашены с помощью canvas.fillText(). Таким образом, все, что мне было нужно, это добавить .fillStyle = "whatever", и он работает.

+0

Можете ли вы сделать jsfiddle? Я привык видеть данные, определенные как массив объектов со значением, меткой и цветом [{value: 5, label: 'text', color: '# FFFFFF'}]. Я не знаю, как будет использоваться ваша структура. –

+0

Я нашел jsfiddle, который показывает основную структуру пончиков и отправил ее – Organiccat

ответ

0

Реализован цвет текста внутри пончиков, в то время как он влияет на вторичный цвет, на самом деле был написан с использованием canvas.fillText(). Таким образом, все, что мне было нужно, это добавить .fillStyle = "whatever", и он работает.

0

Изменить

var myPie = new Chart(document.getElementById("canvas").getContext("2d")).Doughnut(pieData,{percentageInnerCutout : 80}); 

по

var myPie = new Chart(document.getElementById("canvas").getContext("2d")).Doughnut(pieData,doughnutOptions); 

Вы можете найти все доступные варианты здесь http://www.chartjs.org/docs/#getting-started-global-chart-configuration

Для вас цвета текста вы можете добавить эту опцию

var doughnutOptions= { 
scaleLabel: '<p style="color: red"><%=value%></p>' 
} 

Изменить style="color: red" по вашему желанию

+0

Я добавил «scaleFontColor:« # 00FF00 », но это не работает, по какой-либо причине? – Organiccat

+0

Попробуйте использовать все возможные варианты, как в ссылке I Если это не сработает, я не знаю, почему ... извините – Weedoze

+0

Это не получается правильно обработано на выходе. – Organiccat

Смежные вопросы