chart.js - 突出显示图表 JS 中的特定点
问题描述
在此处输入图像描述我想突出显示 chartjs 中的特定点,并且我希望在 chart js 中的数据点处截取 x 和 y 轴。
点 (753.17,126.52) 应使用标记突出显示,而折线图中该点的其余部分不应突出显示。
下面是我要创建如下图表的图像。
<apex:page >
<apex:includeScript value="{!$Resource.Chartjs}"/>
<script language="JavaScript">
window.onload = function displayLineChart() {
var data = {
labels: [669.426, 669.427,735.618,753.170,801.809],
datasets: [
{
fillColor: "rgb(255,255,255)",
strokeColor: "rgb(0,0,128,1.0)",
pointColor: "rgba(176,196,222)",
borderColor: "lightgreen",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
data: [0.00, 50, 100, 126.52, 200]
},
]
};
var ctx = document.getElementById("lineChart").getContext("2d");
var options = {
scale: {
ticks: {
display: false
}
}
};
var lineChart = new Chart(ctx).Line(data, {
//Boolean - If we show the scale above the chart data
scaleOverlay : false,
//Boolean - If we want to override with a hard coded scale
scaleOverride : false,
//** Required if scaleOverride is true **
//Number - The number of steps in a hard coded scale
scaleSteps : null,
//Number - The value jump in the hard coded scale
scaleStepWidth : null,
//Number - The scale starting value
scaleStartValue : null,
//String - Colour of the scale line
scaleLineColor : "rgba(0,0,0,.1)",
//Number - Pixel width of the scale line
scaleLineWidth : 2,
//Boolean - Whether to show labels on the scale
scaleShowLabels : false,
//Interpolated JS string - can access value
scaleLabel : "<%=value%>",
//String - Scale label font declaration for the scale label
scaleFontFamily : "'Arial'",
//Number - Scale label font size in pixels
scaleFontSize : 12,
//String - Scale label font weight style
scaleFontStyle : "normal",
//String - Scale label font colour
scaleFontColor : "#666",
///Boolean - Whether grid lines are shown across the chart
scaleShowGridLines : false,
//String - Colour of the grid lines
scaleGridLineColor : "rgba(0,0,0,.05)",
//Number - Width of the grid lines
scaleGridLineWidth : 1,
//Boolean - Whether the line is curved between points
bezierCurve : true,
//Boolean - Whether to show a dot for each point
pointDot : true,
//Number - Radius of each point dot in pixels
pointDotRadius : 5,
//Number - Pixel width of point dot stroke
pointDotStrokeWidth : 1,
//Boolean - Whether to show a stroke for datasets
datasetStroke : true,
//Number - Pixel width of dataset stroke
datasetStrokeWidth : 2,
//Boolean - Whether to fill the dataset with a colour
datasetFill : true,
//Boolean - Whether to animate the chart
animation : true,
//Number - Number of animation steps
animationSteps : 60,
//String - Animation easing effect
animationEasing : "easeOutQuart",
//Function - Fires when the animation is complete
onAnimationComplete : null
});
lineChart.defaults.scale.gridLines.display
= false;
}
</script>
<div class="box">
<canvas id="lineChart" height="500" width="600"></canvas>
</div>
</apex:page>
解决方案
我已经使用Chart.js 版本 2.8.0测试了一种可能的解决方案。它基于它的Scriptable Option和您可以在此处找到的优秀示例。
下面的示例是一个简化且可执行的 html/js 代码,您可以通过运行其片段(代码下方的按钮)来测试。
关键是 line radius : customRadius,
,其中customRadius指的function customRadius( context )
是代码中的。那是因为radius是一个Scriptable Option。
该函数告诉应用程序在索引为 3(标签“d”)或值等于或大于 8 时使半径等于 10。
let ctx = document.getElementById( 'actual_chart' );
new Chart(
ctx,
{
type : 'line',
data : {
labels : [ 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h' ],
datasets: [
{
data: [ 0, 1, 1, 2, 3, 5, 8, 13 ]
}
]
},
options: {
legend : {
display: false
},
elements: {
point: {
radius : customRadius,
display: true
}
}
}
} );
function customRadius( context )
{
let index = context.dataIndex;
let value = context.dataset.data[ index ];
return index === 3 || value >= 8 ?
10 :
2;
}
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<title>55468483</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.min.js"></script>
</head>
<body>
<canvas id="actual_chart"></canvas>
</body>
</html>
生成的图表是这样的:
您可以在此答案的第一段中找到有关参考的更多详细信息。
请让我们知道它是否有帮助。
推荐阅读
- pdf - 使用 OpenPDF 的 PDF 每一页上的矩形页眉和页脚块
- python - 在 Python 中连接两个字符串的最快方法
- excel - 如何在使用“X”按钮关闭第二个用户表单后显示用户表单(终止事件中断代码)
- python - 从数据框生成网络图
- kubernetes - 初始化 Kubernetes 集群时如何指定网络接口?
- r - Returning a true value if it is a close match among different columns in r
- javascript - MetaMask - RPC 错误:权限请求已经挂起,在 Angular 10 中
- node.js - onEndReached FlatList React Native
- python - 如何在列表理解中将变量添加到 for 循环
- laravel - Laravel Fortify + Inertia + vue 如何添加角色和权限?