Может ли диаграмма. js отображать текст, связанный с каждой точкой на линейной диаграмме, которая постоянно видна? - PullRequest
Новая
       6

Может ли диаграмма. js отображать текст, связанный с каждой точкой на линейной диаграмме, которая постоянно видна?

0 голосов
/ 13 июля 2020

Чтение https://www.chartjs.org/docs/latest/charts/line.html#general, похоже, нет возможности добавить постоянно видимую метку, связанную с каждой точкой данных.

Например, в скрипте ниже значения данных: 

[{x: 1, y: 2}, {x: 2, y: 4}, {x: 3, y: 8},{x: 4, y: 16}]

Может составлять диаграмму. js отображать текст, связанный с каждой точкой, которая постоянно видна?

Таким образом, вместо структуры данных выше используйте: 

[{x: 1, y: 2, text:'Test1'}, {x: 2, y: 4, text:'Test2'}, {x: 3, y: 8, text:'Test3'},{x: 4, y: 16, text:'Test4'}]

атрибут text содержит текстовые данные, которые будут отображаться для данной точки.

Fiddle: https://jsfiddle.net/adrianfiddleuser/0j6L2mag/3/

Fiddle sr c:

HTML: 

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<canvas id="myChart"></canvas>

Javascript: 

var ctx = document.getElementById("myChart");

var myChart = new Chart(ctx, {
  type: 'scatter',
  data: {
    datasets: [
        {
        label: 'test',
        data: [{x: 1, y: 2}, {x: 2, y: 4}, {x: 3, y: 8},{x: 4, y: 16}],
        showLine: true,
        fill: false,
        borderColor: 'rgba(0, 200, 0, 1)'
        }
    ]
  },
  options: {
    tooltips: {
      mode: 'index',
      intersect: false,
    },
    hover: {
      mode: 'nearest',
      intersect: true
    },
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero:true
        }
      }]
    },
  }
});

Обновление:

Этот код: 

var ctx = document.getElementById("myChart");

var myChart = new Chart(ctx, {
  type: 'line',
    
  data: {
  labels: ["T", "A", "s" , "sdfs"],
    datasets: [
        {
        label: 'test',
        data: [{x: 1, y: 2}, {x: 2, y: 4}, {x: 3, y: 8},{x: 4, y: 16}],
        showLine: true,
        fill: false,
        borderColor: 'rgba(0, 200, 0, 1)'
        }
    ]
  },
  options: {
    tooltips: {
      mode: 'index',
      intersect: false,
    },
    hover: {
      mode: 'nearest',
      intersect: true
    },
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero:true
        }
      }]
    },
  }
});

Достигает желаемого поведение частично. Могут ли всплывающие подсказки отображаться постоянно?

Обновленная скрипка: https://jsfiddle.net/adrianfiddleuser/0j6L2mag/14/

1 Ответ

1 голос
/ 13 июля 2020

При использовании последней стабильной версии Chart. js (2.9.3) это можно сделать, например, с помощью глобальных плагинов .

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

Chart.plugins.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));
        });
      });      
      chart.options.tooltips.enabled = false; // turn off normal tooltips
    }
  },
  afterDraw: function(chart, easing) {
    if (chart.config.options.showAllTooltips) {
      if (!chart.allTooltipsOnce) {
        if (easing !== 1) {
          return;
        }
        chart.allTooltipsOnce = true;
      }
      chart.options.tooltips.enabled = true;
      Chart.helpers.each(chart.pluginTooltips, function(tooltip) {
        tooltip.initialize();
        tooltip.update();
        tooltip.pivot();
        tooltip.transition(easing).draw();
      });
      chart.options.tooltips.enabled = false;
    }
  }
});

var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
  type: 'line',
    
  data: {
  labels: ["T", "A", "s" , "sdfs"],
    datasets: [
        {
        label: 'test',
        data: [{x: 1, y: 2}, {x: 2, y: 4}, {x: 3, y: 8},{x: 4, y: 16}],
        showLine: true,
        fill: false,
        borderColor: 'rgba(0, 200, 0, 1)'
        }
    ]
  },
  options: {
    showAllTooltips: true,
    hover: {
      mode: 'nearest',
      intersect: true
    },
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero:true
        }
      }]
    },
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="myChart"></canvas>
...