相关疑难解决方法(0)

我正在尝试使用Chart.js2中的圆环图显示一些数据.

我目前的图表如下所示:

我想要的输出必须显示另一个属性,即百分比,如下所示:

我已经阅读了文档,但我无法应对这一点,因为它非常通用,我是JavaScript的新手.

我的第一个图表的代码如下:

const renderCashCurrencyPie = (cashAnalysisBalances) => {
  if (cashAnalysisBalances) {
    const currenciesName = cashAnalysisBalances
    .map(curName => curName.currency);

    const availableCash = cashAnalysisBalances
    .map(avCash => avCash.availableCash);

    let currenciesCounter = 0;
    for (let i = 0; i < currenciesName.length; i += 1) {
      if (currenciesName[i] !== currenciesName[i + 1]) {
        currenciesCounter += 1;
      }
    }

    const currenciesData = {
      labels: currenciesName,
      datasets: [{
        data: availableCash,
        backgroundColor: [
          '#129CFF',
          '#0C6DB3',
          '#FF6384',
          '#00FFFF'
        ],
        hoverBackgroundColor: [
          '#FF6384',
          '#36A2EB',
          '#FFCE56',
          '#00FFFF'
        ] …

我在我的php页面中使用Chart.js绘制饼图.我发现工具提示显示每个切片值.

但我希望显示如下图像的值.

我不知道如何用chart.js做到这一点.

请帮我.

我的Javascript代码:

function drawPie(canvasId,data,legend){
    var ctx = $("#pie-canvas-" + canvasId).get(0).getContext("2d");

    var piedata = [];
    $.each(data,function(i,val){
        piedata.push({value:val.count,color:val.color,label:val.status});
    });
    var options =
    {
        tooltipTemplate: "<%= Math.round(circumference / 6.283 * 100) %>%",
    }
    var pie = new Chart(ctx).Pie(piedata,options);
    if(legend)document.getElementById("legend").innerHTML = pie.generateLegend();
}

php代码:

printf('<table><tr>');
echo '<td style="text-align: right;"><canvas id="pie-canvas-'
    . $canvasId
    . '" width="256" height="256" ></canvas></td><td style="text-align: left;width:360px;height:auto" id="legend" class="chart-legend"></td></tr></table>';

     echo '<script type="text/javascript">drawPie('
    . $canvasId
    . ', '
    . $data3
    .', '
    . $legend
    . ');</script>';

我有一个带有四个标签的饼图:

var data = [{
    data: [50, 55, 60, 33],
    labels: ["India", "China", "US", "Canada"],
    backgroundColor: [
        "#4b77a9",
        "#5f255f",
        "#d21243",
        "#B27200"
    ],
    borderColor: "#fff"
}];

使用chartjs-plugin-datalabels插件我想用下面的代码显示每个Pie片中的百分比值:

formatter: (value, ctx) => {

        let datasets = ctx.chart.data.datasets;

        if (datasets.indexOf(ctx.dataset) === datasets.length - 1) {
            let sum = 0;
            datasets.map(dataset => {
                sum += dataset.data[ctx.dataIndex];
            });
            let percentage = Math.round((value / sum) * 100) + '%';
            return percentage;
        } else {
            return percentage;
        }
    },
    color: '#fff',
}

我获得了所有馅饼的100%价值,而不是相应的百分比.这是JSFiddle(https://jsfiddle.net/kingBethal/a1Lvn4eb/7/)

我想制作一个在y轴上具有百分比值的图表,但我无法在文档中找到任何选项.请提出一些答案

我想在图表中显示百分比符号。我从控制器中获取数据库中的数据并显示 vue js 文件中的数据。这是我的图表代码。

<script>
import { Doughnut } from 'vue-chartjs';

export default {
    props:['appurl'],
    extends: Doughnut,
    data(){
        return{
            item:[],
        }
    },
    mounted() {
        this.getData();
    },
    methods:{
        setChartLoader: function(e) {
            this.$emit('setChartLoader', e);
        },
        renderDoughnutChart(serviceName,serviceData){
            this.renderChart({
                datasets: [{
                    data: serviceData,
                    backgroundColor: [
                        'rgba(41, 121, 255, 1)',
                        'rgba(38, 198, 218, 1)',
                        'rgba(138, 178, 248, 1)',
                        'rgba(255, 100, 200, 1)',
                        'rgba(116, 96, 238, 1)',
                        'rgba(215, 119, 74, 1)',
                        'rgba(173, 92, 210, 1)',
                        'rgba(255, 159, 64, 1)',
                        'rgba(247, 247, 247, 1)',
                        'rgba(227, 247, 227, …