Angular 2图表-改变点半径

Question

我正在使用 ng2-charts (https://github.com/valor-software/ng2-charts) 为我的 Angular 2 应用程序创建折线图。该图表工作正常 - 当您将鼠标悬停在某个点上时，该点会自动变为白色，以说明它正被鼠标悬停。我想模仿这种行为，但要通过代码手动进行。

当您单击时，将鼠标悬停在一个点上，我有单击事件 return 一个包含图表的对象（见图）。从那个对象中，我设法找到了一些似乎可以控制点半径的值：_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()'，但我收到一条错误消息，指出 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>

然后在 TypeScript 中创建选项对象：

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

Angular 2图表-改变点半径

Angular 2 chart - change point radius

javascript

angularjs

chart.js

ng2-charts

angular