我正在使用ng2-charts(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()',但是我收到一条错误消息,指出update()不是函数。
答案 0 :(得分:2)
您可以在选项中设置其中一些值,然后将它们传递到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
}
}
};