Chart.js - Подсказки в пончике всегда показываются?

Question

Chart.js - Подсказки в пончике всегда показываются?

При использовании библиотеки Chart.js я могу без проблем добавить несколько пончиков на свою страницу.

http://www.chartjs.org/docs/

Но я не могу найти способ всегда показывать всплывающие подсказки - не только при наведении мыши на пончик. Кто-нибудь знает, возможно ли это?

19

jquery charts

Источник

user776264 04 сен '14 в 08:55

5 ответов

Другие вопросы по тегам jquery charts

user2742236 18 сен '14 в 12:51 2014-09-18 12:51 · Answer 1 · 2014-09-18 12:51

У меня была та же самая проблема сегодня, и я решил ее довольно легко, добавив опции onAnimationComplte и tooltipevents.

onAnitmationComplete вызывает метод для отображения всплывающих подсказок, как при наведении курсора. Обычно вы определяете события в всплывающих подсказках для отображения всплывающих подсказок, но нам нужно удалить их и передать пустой массив.

Примечание:( http://www.chartjs.org/docs/).

Javascript:

var options = 
{
    tooltipTemplate: "<%= value %>",

    onAnimationComplete: function()
    {
        this.showTooltip(this.segments, true);

        //Show tooltips in bar chart (issue: multiple datasets doesnt work http://jsfiddle.net/5gyfykka/14/)
        //this.showTooltip(this.datasets[0].bars, true);

        //Show tooltips in line chart (issue: multiple datasets doesnt work http://jsfiddle.net/5gyfykka/14/)
        //this.showTooltip(this.datasets[0].points, true);  
    },

    tooltipEvents: [],

    showTooltips: true
}

var context = $('#chart').get(0).getContext('2d');
var chart = new Chart(context).Pie(data, options);

HTML:

<div id="chartContainer">
    <canvas id="chart" width="200" height="200"></canvas>
</div>

Пример данных:

var data = [
    {
        value: 300,
        color:"#F7464A",
        highlight: "#FF5A5E"
    },
    {
        value: 50,
        color: "#46BFBD",
        highlight: "#5AD3D1"
    },
    {
        value: 100,
        color: "#FDB45C",
        highlight: "#FFC870"
    }
]

JSFiddle PIE: http://jsfiddle.net/5gyfykka/

JSFiddle BAR / LINE: http://jsfiddle.net/5gyfykka/14/

user3240038 16 фев '17 в 11:13 2017-02-16 11:13 · Answer 2 · 2017-02-16 11:13

Вы можете сделать это, написав свой собственный плагин, который поддерживает версию ChartJS> 2.1.5.

Включите следующий код в ваш скрипт:

// Show tooltips always even the stats are zero

Chart.pluginService.register({
  beforeRender: function(chart) {
    if (chart.config.options.showAllTooltips) {
      // create an array of tooltips
      // we can't use the chart tooltip because there is only one tooltip per chart
      chart.pluginTooltips = [];
      chart.config.data.datasets.forEach(function(dataset, i) {
        chart.getDatasetMeta(i).data.forEach(function(sector, j) {
          chart.pluginTooltips.push(new Chart.Tooltip({
            _chart: chart.chart,
            _chartInstance: chart,
            _data: chart.data,
            _options: chart.options.tooltips,
            _active: [sector]
          }, chart));
        });
      });

      // turn off normal tooltips
      chart.options.tooltips.enabled = false;
    }
  },
  afterDraw: function(chart, easing) {
    if (chart.config.options.showAllTooltips) {
      // we don't want the permanent tooltips to animate, so don't do anything till the animation runs atleast once
      if (!chart.allTooltipsOnce) {
        if (easing !== 1)
          return;
        chart.allTooltipsOnce = true;
      }

      // turn on tooltips
      chart.options.tooltips.enabled = true;
      Chart.helpers.each(chart.pluginTooltips, function(tooltip) {
        tooltip.initialize();
        tooltip.update();
        // we don't actually need this since we are not animating tooltips
        tooltip.pivot();
        tooltip.transition(easing).draw();
      });
      chart.options.tooltips.enabled = false;
    }
  }
});

// Show tooltips always even the stats are zero

А затем просто используйте следующую строку в настройках любого графика, на котором вы хотите показать все доступные всплывающие подсказки.

showAllTooltips: true

Рабочая скрипка приведена ниже

// Show tooltips always even the stats are zero

Chart.pluginService.register({
  beforeRender: function(chart) {
    if (chart.config.options.showAllTooltips) {
      // create an array of tooltips
      // we can't use the chart tooltip because there is only one tooltip per chart
      chart.pluginTooltips = [];
      chart.config.data.datasets.forEach(function(dataset, i) {
        chart.getDatasetMeta(i).data.forEach(function(sector, j) {
          chart.pluginTooltips.push(new Chart.Tooltip({
            _chart: chart.chart,
            _chartInstance: chart,
            _data: chart.data,
            _options: chart.options.tooltips,
            _active: [sector]
          }, chart));
        });
      });

      // turn off normal tooltips
      chart.options.tooltips.enabled = false;
    }
  },
  afterDraw: function(chart, easing) {
    if (chart.config.options.showAllTooltips) {
      // we don't want the permanent tooltips to animate, so don't do anything till the animation runs atleast once
      if (!chart.allTooltipsOnce) {
        if (easing !== 1)
          return;
        chart.allTooltipsOnce = true;
      }

      // turn on tooltips
      chart.options.tooltips.enabled = true;
      Chart.helpers.each(chart.pluginTooltips, function(tooltip) {
        tooltip.initialize();
        tooltip.update();
        // we don't actually need this since we are not animating tooltips
        tooltip.pivot();
        tooltip.transition(easing).draw();
      });
      chart.options.tooltips.enabled = false;
    }
  }
});

// Show tooltips always even the stats are zero


var canvas = $('#myCanvas2').get(0).getContext('2d');
var doughnutChart = new Chart(canvas, {
  type: 'doughnut',
  data: {
    labels: [
      "Success",
      "Failure"
    ],
    datasets: [{
      data: [45, 9],
      backgroundColor: [
        "#1ABC9C",
        "#566573"
      ],
      hoverBackgroundColor: [
        "#148F77",
        "#273746"
      ]
    }]
  },
  options: {
    // In options, just use the following line to show all the tooltips
    showAllTooltips: true
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.bundle.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>
     <canvas id="myCanvas2" width="350" height="296"></canvas>
</div>

Работаю JSFIDDLE здесь.

user1400650 22 май '15 в 06:08 2015-05-22 06:08 · Answer 3 · 2015-05-22 06:08

Я расширил метод Kapi, поэтому при наведении на него вы все равно сохраняете функциональность по умолчанию, например, изменение цвета, а при наведении курсора на раздел скрывает все остальное. Я думаю, что это выглядит лучше.

var options =
{
    onAnimationComplete: function () {
        this.showTooltip(this.segments, true);
    },        
}

var ctx = document.getElementById("Chart").getContext("2d");
var myPieChart = new Chart(ctx).Pie(data, options);

$("#Chart").on('mouseleave', function (){
    myPieChart.showTooltip(myPieChart.segments, true);
});

user842644 04 дек '15 в 22:36 2015-12-04 22:36 · Answer 4 · 2015-12-04 22:36

В случае, если кто-то пытается скрыть некоторые подсказки сегмента; сделайте это во всплывающей подсказке:

tooltipTemplate : "<%  var percentage = Math.round(circumference / 6.283 * 100); if (percentage >8)%><%= percentage %>%";

например, этот код проверяет значение% и отображает только значения выше 8%, чтобы уменьшить беспорядок

user538371 08 фев '16 в 08:32 2016-02-08 08:32 · Answer 5 · 2016-02-08 08:32

Если вы хотите отобразить только одну подсказку, вы должны использовать этот код. Вот пример для первого сегмента.

chart.showTooltip([chart.segments[0]], true);

Функция showTooltip принимает только 2-мерные массивы для первого параметра.

0

Источник

user538371 08 фев '16 в 08:32