Добавьте процент к значку ярлыка - кольцевая диаграмма. js - PullRequest
Новая
       12

Добавьте процент к значку ярлыка - кольцевая диаграмма. js

0 голосов
/ 18 апреля 2020

Я провел много исследований, но не смог выяснить, как ввести процент в значке ярлыка, как показано на этом рисунке ниже.

обновление: я использую это laravel Обертка: https://github.com/ConsoleTVs/Charts, поэтому я не хотел запутывать зрителей. Я просто хочу узнать название опции ... мой код такой: 

$perTopicChart = (new AnsweredPerTopic);//->percentageInnerCutout(70);
    $perTopicChart->options([
        "events" => [],
        "legend" => [
            "labels" => [
                "defaultFontFamily" => "Tahoma",
                "fontSize" => 16,
            ],
            "position" => 'bottom'
        ],
        "cutoutPercentage" => 80,
        'tooltips' => [
            "show" => true
        ]
    ])->displayAxes(0);

    // put the labels (keys)
    $perTopicChart->labels($keys->map(function ($q) use ($perTopic) {
        $topic = Topic::find($q);
        $str = $topic->name;
        foreach ($perTopic as $key => $value) {
            if ($key == $q) {
                $str .= ' ' . round($value) . '%';
            }
        }
        return "topic name " . '-'. $topic->id;

    })->push('other'))
    ->options([]);
    // get random color 
    // $color = RandomColor::many(count($keys), array(
    //     'luminosity' => 'bright',
    //     'hue' => ['pink', 'green', 'orange'] // e.g. 'rgb(225,200,20)'
    //     ));
    $color = [
        "#38c172",
        "#9F9",
        "#Fa0",
        "pink",
        "red",
    ];

    $perTopicChart->dataset("Practice per Category", "doughnut", $values->map(function ($q) {
        return round($q);
    })->push($remainingPercenteg))
        ->backgroundColor($color)
        ->options([
            'borderWidth' => 2.5,
        ]);

первое изображение текущий результат, а второе - то, что я хотел. заранее спасибо.

the current result what I want to achieve

Ответы [ 2 ]

1 голос
/ 19 апреля 2020

Даже я много исследовал, не мог найти что-либо для такого поведения в библиотеке js, так что придумайте хак.

Хак это что-то вроде, не позволяйте диаграмме js чтобы рисовать легенды. Вместо этого мы просто получаем HTML легенд из библиотеки js диаграммы и помещаем их в наш контейнер. Благодаря этому мы имеем полный доступ к легендам и можем делать все, что захотим.

https://jsfiddle.net/1kxenzpr/

const data = [70, 30, 0];
debugger;
var ctx = document.getElementById("myChart").getContext('2d');
var chart = new Chart(ctx, {
  type: 'pie',
  data: {
    labels: ["Green", "Blue", "Gray", "Purple", "Yellow", "Red", "Black"],
    datasets: [{
      backgroundColor: [
        "#2ecc71",
        "#3498db",
        "#95a5a6",
        "#9b59b6",
        "#f1c40f",
        "#e74c3c",
        "#34495e"
      ],
      data: data
    }]
  },
  options: {
    legend: {
      display: false
    },
  }
});
var myLegendContainer = document.getElementById("legend");
myLegendContainer.innerHTML = chart.generateLegend();
var legendItems = myLegendContainer.getElementsByTagName('li');
for (var i = 0; i < legendItems.length; i++) {
  legendItems[i].querySelectorAll('span')[0].innerHTML = data[i] + '%'
}
.container {
  width: 80%;
  margin: 15px auto;
}

[class$="-legend"] {
  list-style: none;
  cursor: pointer;
  padding-left: 0;
}

[class$="-legend"] li {
  display: inline-block;
  padding: 0 5px;
}

[class$="-legend"] li.hidden {
  text-decoration: line-through;
}

[class$="-legend"] li span {
  display: inline-block;
  margin-right: 10px;
  width: 50px;
  font-size: 12px;
  text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>

<div class="container">
  <div>
    <canvas id="myChart"></canvas>
    <div id="legend"></div>
  </div>
</div>
1 голос
/ 18 апреля 2020

Нельзя (установкой X или Y). Вы должны использовать legendCallback: https://www.chartjs.org/docs/latest/configuration/legend.html#html -legends

В целом, ваш Q не соответствует правилам StackOverflow (это скорее миссия, а не Q). { ссылка }

В любом случае, это + - идея (конвертировать в% по базису c JS). Чтобы сделать этот шаг вперед, вы должны сгенерировать full Генерировать HTML легенду (чтобы поместить число внутри цветного div). Похожие: Пользовательская легенда с диаграммой JS v2.0 

var myData = [4, 9, 5];

var data = {
  labels: ["Africa", "Asia", "Europe"],
  datasets: [{
    label: "Population (millions)",
    backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f"],
    data: myData
  }]
};

/* get total */
const reducer = (accumulator, currentValue) => accumulator + currentValue;
var total = myData.reduce(reducer);

var options = {
  responsive: true,
  title: {
    text: 'Show % calucate on fly',
    position: 'top',
    display: true
  },
  legend: {
    display: true,
    labels: {
      /* generateLabels */
      generateLabels(chart) {
        const data = chart.data;
        if (data.labels.length && data.datasets.length) {
          /* inner loop throw lables */
          return data.labels.map((label, i) => {
            var backgroundColor = data.datasets[0].backgroundColor[i];
            var current = data.datasets[0].data[i];
            var percentage =  ((current * 100) / total).toFixed(2) + '%'; 
            return {
              text: label + " | " + percentage,
              fillStyle: backgroundColor,
              // Extra data used for toggling the correct item
              index: i
            };
          });
        }
        return [];
      }

    },

  },
  scales: {
    xAxes: [{
      display: true
    }],
    yAxes: [{
      display: true
    }]
  }
};


new Chart(document.getElementById("chart"), {
  type: 'pie',
  data: data,
  options: options
});
<canvas id="chart" width="800" height="450"></canvas>

<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
...