Необходимо настроить поведение графика - PullRequest
Новая
       41

Необходимо настроить поведение графика

1 голос
/ 19 сентября 2019

Я использую библиотеку chart.js для построения линейного графика с двумя сериями в своем угловом приложении.Ниже приведен мой код из файла ts: 

this.myChart = new Chart(this.ctx, {
  type: 'line',
  data: {
    labels: labels,
    datasets: [{
        label: 'Data1',
        data: [100, 345, 657, 788, 300],
        fill: false,
        backgroundColor: '#3C96D2',
        pointRadius: 1,
        borderColor: '#3C96D2',
        pointHoverRadius: 3
      },
      {
        label: 'Data2',
        data: [567, 879, 200, 800],
        fill: false,
        backgroundColor: '#122449',
        pointRadius: 1,
        borderColor: '#122449',
        pointHoverRadius: 3
      }
    ]
  },
  options: {
    layout: {
      padding: {
        left: 50,
        right: 0,
        top: 0,
        bottom: 0
      }
    },
    hover: {
      mode: 'point',
    },
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: false
        },
        scaleLabel: {
          display: true,
          labelString: 'prices'
        }
      }],
      xAxes: [{
        scaleLabel: {
          display: true,
          labelString: 'Year'
        }
      }],
    }
  }
});

Он правильно строит линейный график с двумя наборами данных.То, что я хочу выяснить, это точка пересечения этих двух линий и отображения некоторого пользовательского div в этой точке на графике.Я также открыт, чтобы использовать любой другой плагин для того же.Уже пытались использовать amcharts, но не нашли никакого решения.Любая помощь очень ценится.

1 Ответ

0 голосов
/ 19 сентября 2019

Это будет очень трудно достичь с помощью кривых Безье (lineTension !== 0).Вам нужно будет потратить некоторое время на изучение математики для этого.

К счастью, если вам не нужны кривые Безье, так что только прямые линии между вашими точками данных, уже есть ответ по StackOverflow, прямо здесь!

...