Vue Chart.js - простая точка / линия на гистограмме

Question

Мне нужно добавить простую точечную / вертикальную линию на мой bar график, который имеет динамическое значение X и 0 для значения Y.Предварительный просмотр того, что мне нужно (красная точка):

Где зеленые значения являются динамическими.

Предварительный просмотр моего текущего состояния:

Где 3,30 должно быть координатой X точки - [3.30, 0].

Я использую Vue chart для графиков, и я попытался создать смешанный один с bar и scatter, но scatter требует type: 'linear' для его xAxis, что не соответствует моей потребности в bar графике.

Итак, я попытался с chartjs-plugin-annotation , и это тип box, который принимает «координаты», ноПроблема здесь в том, что значение X должно быть фиксированным значением на оси X (labels объект).Если я добавлю ось X [3,0], она будет работать, но если есть десятичное число, например [3,5, 0], оно не будет работать.

---

  // data
  options: {
    responsive: true,
    maintainAspectRatio: false,
    legend: {
      display: false
    },
    scales: {
      yAxes: [{
        ticks: {
          min: 0,
          max: 1,
          stepSize: 0.1
        }
      }]
    }
  }

  // computed 
  labels: [1, 2, 3, 4, 5, 6], // fixed value, there are always 6 bars
  datasets: [
    {
      label: 'Values',
      backgroundColor: '#f89098',
      data: this.tableInputValues // array of decimal values
    }
  ]

---

Итак, мой вопрос в том, как поставить «простую» точку или вертикальную линию на гистограмму Chart.js , где точка имеет динамическое значение для оси X -> [динамическое значение, 0].

К вашему сведению - это примерно Ожидаемое значение

Answer 1

Это мое решение для вашей проблемы https://jsfiddle.net/huynhsamha/e54djwxp/

И это скриншот для результата

В моем решенииЯ использую type="line" и обе оси X и Y с type="linear".Я также добавляю свойство options к <chart> для использования options в ChartJS

<div id="vue">
  <chart type="line" :data="data" :options="options"></chart>
</div>

. options настроит оси X и Y для визуализации точек данных иожидаемое значение:

      options: {
        scales: {
            xAxes: [{
            type: 'linear',
            ticks: {
                min: 1,
                max: 6,
                stepSize: 1
            }
          }],
           yAxes: [{
            type: 'linear',
            ticks: {
                min: 0,
                max: 1,
                stepSize: 0.1
            }
            }]
        }
      }

И data будет иметь 2 datasets.Первый - это точки данных, используйте тип line, а второй - ожидаемое значение, которое использует тип bubble.

      data: {
        datasets: [{
            label: 'Frequency Data',
            data: dataPoints.map(({ val, freq }) => ({
                x: val,
              y: freq
            })),
            backgroundColor: 'rgba(72, 202, 59, 0.4)',
            borderColor: 'rgba(72, 202, 59, 1)'
        }, {
            label: 'Expected Value',
            type: 'bubble',
            data: [{ 
                x: expectedValue, 
              y: 0, 
              r: 8 // radius
            }],
            backgroundColor: 'rgba(255, 68, 0, 0.4)',
            borderColor: 'rgba(255, 68, 0, 1)'
        }]
        },

В datasets у нас есть dataPoints и expectedValue,он будет получен из API, чтобы получить ваши данные.Я также моделирую простой API для точек данных:

// simulate the API to get data points
const retrieveData = () => [
    { val: 1, freq: 0.15 },
    { val: 2, freq: 0.25 },
    { val: 3, freq: 0.3 },
    { val: 4, freq: 0.2 },
    { val: 5, freq: 0.1 },
    { val: 6, freq: 0.45 }
]


// fetch your data here, return array of JSON { val, freg }
const dataPoints = retrieveData() || [];

// calculate expected value = sum( val * freq ) each i in dataPoints
const expectedValue = dataPoints.reduce((cur, { val, freq }) => cur + val * freq, 0).toFixed(4);

Вы можете запустить сниппет или запустить на скрипке https://jsfiddle.net/huynhsamha/e54djwxp/92/

<script async src="//jsfiddle.net/huynhsamha/e54djwxp/92/embed/js,html,css,result/dark/"></script>

Answer 2

Насколько я понимаю, Vue Chart работает с использованием canvas (как видно на Демонстрационная страница ).
Итак, мое предложение здесь состоит в том, чтобы извлечь узел canvas, представляющий диаграмму, в вашей DOM и динамически записатьжелаемая точка.Например:

var c = document.getElementById("bar-chart");   //hereby assuming canvas named "bar-chart"
var ctx = c.getContext("2d");
ctx.fillStyle = "#ff0000";                     //red color for the dot
ctx.beginPath();
let yPosition = c.height - 5;                 //fixed y position
let xPosition = 35;                          //that's the dynamic expected value
ctx.arc(xPosition, yPosition, 2.5, 0, 2 * Math.PI);
ctx.fill();

Здесь вы найдете демонстрацию, показывающую, как этого добиться с помощью Vue.В этом сценарии вам нужно обернуть код, чтобы нарисовать точку на холсте с крючком afterDraw.Этот хук должен быть присоединен к компоненту диаграммы как плагин, вот так:

...
mounted () { 
   //adding the plugin to draw the red dot
   this.addPlugin({
    id: 'chart-plugin',
    afterDraw: function (chart) {
       var c = chart.canvas;   
       var ctx = c.getContext("2d");
       ctx.fillStyle = "#ff0000";                     
       ctx.beginPath();
       let xPosition = 742; //x positioning to be calculated according to your needs
       let yPosition = c.height - 28;                                       
       ctx.arc(xPosition, yPosition, 3, 0, 2 * Math.PI);
       ctx.fill();
    }
  });

  //actual chart rendering
  this.renderChart({ 
    ...
  });
}
...

Для полноты здесь вы найдете список всех доступных хуковAPI плагина Chart.js.