Как отобразить процент% на круговой диаграмме NVD3?

Question

Я пытался отобразить процент на NVD3 Pie Chart, но я не вижу, как это сделать ... Я ищу что-то вроде this

Прежде всего, есть вариант графика или способ показать что-то внутри каждой части круговой диаграммы? Если да, есть ли возможность отображать процент вместо точных значений?

Спасибо и наслаждайтесь вашими выходными!

Answer 1

Я предполагаю, что вы смогли получить образец NVD3 Pie Chart.

Единственный способ, насколько я знаю, это отредактировать pieChart.js. Вытащите источник NVD3 из here, и под / src/models / открыть pieChart.js и добавить редактирование:

tooltip = function(key, y, e, graph) { 
     return '<h3>' + key + '</h3>' + 
       '<p>' + y + ' % </p>' 
     } 

Или вот NVD3 принимал ссылку на pieChart.js, редактировать line 19 выглядеть следующим образом '<p>' + y + '</p>'

Обязательно добавьте скрипт на странице html, чтобы он овервилл параметры pieChart, унаследованные при загрузке nvd3.js <script src="your/path/to/pieChart.js" type="application/javascript"></script>

UPDATE:

Только так вы знаете, данные, которые вы проходите в графике будет оказана, как это, вы должны сделать процентные расчеты и передать его на график. Размер срезов круговой диаграммы будет рассчитываться на основе данных, которые вы отправляете в диаграмму. Просто дайте знать, пренебрегайте, если вы уже это знаете.

ОБНОВЛЕНИЕ: 30 июль 2013

Я просто наткнулся на правильном пути редактирования подсказки без мастерить с файлом pieChart.js.

var chart = nv.models.pieChart().x(function(d) { 
    return d.key; 
}).y(function(d) { 
    return d.daily[0].sales; 
}).showLabels(true).values(function(d) { 
    return d; 
}).color(d3.scale.aColors().range()).donut(true).tooltips(true).tooltip(function(key, x, y, e, graph) { 
    return '<h3>' + key + ' Custom Text Here ' + x + '</h3> here' + '<p> or here ,' + y + '</p>' 
}); 

Просто хотел, чтобы вы обновили ответ. Итак, теперь вы знаете два способа сделать это.

Надеюсь, это поможет вам.

Answer 2

В версии 1.1.10 из NVD3, можно настроить тип метки

Просто позвоните chart.pie.labelType("percent"); маркировать каждый кусочек с соответствующим процентом. Также можно отобразить ключ labelType("key") или значение labelType("value") каждого фрагмента.

Полный пример:

var slices = [ 
    {name:"Part 1",value:23}, 
    {name:"Part 2",value:38}, 
    {name:"Part 3",value:67} 
]; 

nv.addGraph(function() { 
    var chart = nv.models.pieChart() 
     .x(function(d) { return d.name }) 
     .y(function(d) { return d.value }) 
     .color(d3.scale.category10().range()) 
     .width(300) 
     .height(300); 

    chart.pie.pieLabelsOutside(false).labelType("percent"); 

    d3.select("#chart") 
     .datum(slices) 
     .transition().duration(1200) 
     .attr('width', 300) 
     .attr('height', 300) 
     .call(chart); 

    chart.dispatch.on('stateChange', function(e) { nv.log('New State:', JSON.stringify(e)); }); 

    return chart; 
});