2015-03-20 3 views
2

Что было бы самым простым способом отобразить пользовательские свойства в всплывающей подсказке круговой диаграммы?Отображение пользовательских свойств набора данных в подсказке в chart.js

var pieData = [ 
    { 
     value: 40, 
     color:"#F7464A", 
     highlight: "#FF5A5E", 
     label: "Label 1", 
     description: "This is a description for label 1" 
    }, 
    { 
     value: 60, 
     color: "#46BFBD", 
     highlight: "#5AD3D1", 
     label: "Label 2", 
     description: "This is a description for label 2" 
    } 
]; 

var options = { 
    tooltipTemplate: "<%= label %> - <%= description %>" 
}; 

window.onload = function(){ 
    var ctx = document.getElementById("chart-area").getContext("2d"); 
    window.myPie = new Chart(ctx).Doughnut(pieData, options); 
}; 

Я пробовал просто добавить свойство «decription», а затем распечатать его, но не повезло. Это просто дает мне ошибку, поскольку описание не определено. Я видел, что есть специальная функциональность всплывающих подсказок, но это казалось большой работой для чего-то тривиального. Есть ли более простой способ?

ответ

0

Это не решение действительно, но я решил ее, добавив только описание внутри этикетки ...

label: "Label 2 - Description", 
1

Вы должны пойти:

var options = { 
     tooltipTemplate: "<%= label + '-' + %> <%= description %>" 
    }; 
1

Графики не поддерживает эту функцию официально. Но вы можете настроить всплывающую подсказку с вашими данными, например, в случае LineChart.

первый, сделать диаграмму с наборами данных и опциями

var chart = new Chart(ctx).Line(dataset, opt); 

и добавить свойства, что вы хотите показать в подсказке

var points = chart.datasets[0].points; 
for (var i = 0; i < points.length; i++) { 
    // Add properties in here like this 
    // points[i].time = '2015-04-23 13:06:24'; 
} 

то, вы можете использовать эти свойства, как это.

tooltipTemplate: "<%=time%> : <%=value%>" 

Надеюсь, это кому-то поможет. : D

+0

В случае PieChart вы должны сначала изучить структуру объекта piechart. Удачи! – brannpark