Угловая диаграмма 2 - радиус точки изменения

Question

Я использую ng2-диаграммы (https://github.com/valor-software/ng2-charts), чтобы создать линейную диаграмму для моего приложения Angular 2. Диаграмма работает отлично - когда вы наводите курсор на точку, точка автоматически меняется на белый, чтобы проиллюстрировать, что она зависает мышью. Я хотел бы подражать этому поведению, но вручную с помощью кода.

Когда вы нажимаете, наведите указатель мыши на точку, я нажимаю события, которые возвращают объект, содержащий диаграмму (см. Изображение). Из этого объекта мне удалось найти некоторые значения, которые, по-видимому, управляют радиусом точки: _model.hitRadius, _model.radius, _view.hitRadius и _view.radius (см. Изображение).

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

e.active[0]._model.hitRadius = 5; 
    e.active[0]._model.radius = 10; 
    e.active[0]._view.hitRadius = 5; 
    e.active[0]._view.radius = 10; 

Я также попытался добавить «e.update()» после изменения значения, но я получаю сообщение об ошибке сказав, что обновление() не является функцией.

Answer 1

Вы можете установить некоторые из этих значений в параметрах, а затем передать их в директиву canvas. Поместите [options] тег в HTML:

<div style="display: block;"> 
    <canvas baseChart width="2" height="1" 
      [datasets]="chartData" 
      [labels]="chartLabels" 
      [options]="chartOptions" 
      [colors]="chartColors" 
      [legend]=true 
      chartType=line></canvas> 
</div> 

Затем создайте параметры объекта в машинописи:

private chartOptions = 
{ 
    responsive: true, 
    elements: 
    { 
     point: 
     { 
      radius: 1, 
      hitRadius: 5, 
      hoverRadius: 10, 
      hoverBorderWidth: 2 
     } 
    } 
}; 

More on ChartJS point configuration