Как сделать так, чтобы во всплывающих подсказках диаграммы радара отображались «метки» в vue диаграмме js? - PullRequest
Новая
       55

Как сделать так, чтобы во всплывающих подсказках диаграммы радара отображались «метки» в vue диаграмме js?

0 голосов
/ 21 января 2020

В подсказках моего радара отображаются «метки», но я хочу, чтобы в подсказках радара отображались «данные»

Я ссылаюсь на метод диаграммы. js официальный веб-сайт, но все еще не может отобразить его правильно

Моя карта радара

Диаграмма. js официальный сайт Карта радара

Моя версия кода 

"dependencies": {
"chart.js": "^2.9.3",
"chartkick": "^3.2.0",
"core-js": "^3.3.2",
"hchs-vue-charts": "^1.2.8",
"vue": "^2.6.10",
"vue-chartjs": "^3.5.0",
"vue-chartkick": "^0.6.0",
"vue-router": "^3.1.3",
"vuetify": "^2.1.0"
}

Мой код 

<script>
import { Radar } from "vue-chartjs";

export default {
  extends: Radar,
  data() {
    return {
      datacollection: {
        labels: [
          "Eating","Drinking","Sleeping","Designing","Coding","Cycling","Running"
        ],
        datasets: [
          {
            label: "My First Dataset",
            backgroundColor: "rgba(179,181,198,0.2)",
            borderColor: "rgba(179,181,198,1)",
            pointBackgroundColor: "rgba(179,181,198,1)",
            pointBorderColor: "#fff",
            pointHoverBackgroundColor: "#fff",
            pointHoverBorderColor: "rgba(179,181,198,1)",
            data: [65, 59, 90, 81, 56, 55, 40]
          },
          {
            label: "My Second Dataset",
            backgroundColor: "rgba(255,99,132,0.2)",
            borderColor: "rgba(255,99,132,1)",
            pointBackgroundColor: "rgba(255,99,132,1)",
            pointBorderColor: "#fff",
            pointHoverBackgroundColor: "#fff",
            pointHoverBorderColor: "rgba(255,99,132,1)",
            data: [28, 48, 40, 19, 96, 27, 100]
          }]},
      options: {
        scale: {
          angleLines: {
            display: false
          },
          ticks: {
            suggestedMin: 50,
            suggestedMax: 100
          }}}};},
  mounted() {
    this.renderChart(this.datacollection, this.options);
  }};
</script>

1 Ответ

2 голосов
/ 21 января 2020

Вы можете добавить опцию tooltips с функцией обратного вызова, которая возвращает заголовок следующим образом: 

"options": {
    ...
    "tooltips": {
        "callbacks": {
            "title": (tooltipItem, data) => data.labels[tooltipItem[0].index]
        }
    }
}

Пожалуйста, посмотрите на следующий JavaScript фрагмент кода. Добавление опции tooltips к существующему коду Vue. js должно работать так же. 

new Chart(document.getElementById("myChart"), {
    "type": "radar",
    "data": {
        "labels": ["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running"],
        "datasets": [{
            "label": "My First Dataset",
            "data": [65, 59, 90, 81, 56, 55, 40],
            "fill": true,
            "backgroundColor": "rgba(255, 99, 132, 0.2)",
            "borderColor": "rgb(255, 99, 132)",
            "pointBackgroundColor": "rgb(255, 99, 132)",
            "pointBorderColor": "#fff",
            "pointHoverBackgroundColor": "#fff",
            "pointHoverBorderColor": "rgb(255, 99, 132)"
        }, {
            "label": "My Second Dataset",
            "data": [28, 48, 40, 19, 96, 27, 100],
            "fill": true,
            "backgroundColor": "rgba(54, 162, 235, 0.2)",
            "borderColor": "rgb(54, 162, 235)",
            "pointBackgroundColor": "rgb(54, 162, 235)",
            "pointBorderColor": "#fff",
            "pointHoverBackgroundColor": "#fff",
            "pointHoverBorderColor": "rgb(54, 162, 235)"
        }]
    },
    "options": {
        "elements": {
            "line": {
                "tension": 0,
                "borderWidth": 3
            }
        },
        "tooltips": {
            "callbacks": {
                "title": (tooltipItem, data) => data.labels[tooltipItem[0].index]
            }
        }
    }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="myChart"></canvas>
...