Javascript 围绕折线图中的单个点绘制一条线
我正在创建一个折线图,其中x轴为月份,y轴为数值。问题在于,当存在单个数据点时,不会在其周围绘制任何线。我可以使用annotations插件画一条水平线,但是当值大于0时,我不知道如何画一条线,因为它应该是一条曲线Javascript 围绕折线图中的单个点绘制一条线,javascript,reactjs,chart.js,react-chartjs,react-chartjs-2,Javascript,Reactjs,Chart.js,React Chartjs,React Chartjs 2,我正在创建一个折线图,其中x轴为月份,y轴为数值。问题在于,当存在单个数据点时,不会在其周围绘制任何线。我可以使用annotations插件画一条水平线,但是当值大于0时,我不知道如何画一条线,因为它应该是一条曲线 export const optionsMap = () => ({ maintainAspectRatio: false, responsive: true, legend: { display: false }, elements: {
export const optionsMap = () => ({
maintainAspectRatio: false,
responsive: true,
legend: {
display: false
},
elements: {
topLabel: {}
},
layout: {
padding: {
top: 150,
right: 45,
left: 40,
bottom: 5,
}
},
plugins: {
centerText: false,
datalabels: false,
},
annotation: {
drawTime: 'beforeDatasetsDraw',
annotations: [
{
type: 'line',
scaleID: 'y-axis-0',
value: 0.01,
mode: "horizontal",
borderColor: "#347aeb",
borderWidth: 2,
backgroundColor: "rgba(255, 0, 0, 0.3)"
}
]
}
});
我已经找到了解决办法,希望这能帮助到别人 基本上,我们可以在现有的单个数据点周围添加样本点。我做了一个函数,它基本上是填充采样点,以便在采样点周围画一条线
/**
*
* The data points needed to draw a chart around
* a single point.
*/
const padDataPoints = (data, padValue) => {
for (let i = 0; i < padValue; i++) {
data.push(0);
data.unshift(0);
}
}
/**
*
*绘制图表所需的数据点
*一点。
*/
常量padDataPoints=(数据,padValue)=>{
for(设i=0;i
这是一个简单的函数,它在数据点的任一侧添加填充点
然后,我们可以通过将所有填充点的点半径设置为零,使点在图表js中消失。这是否回答了您的问题?此函数用于绘制水平线。我需要的是,当值大于零时,我应该能够围绕点画一条线,线应该从零开始,连接点。我尝试了几个我自己编写的插件,但没有成功。客户需要它。我现在对项目变更库太深入了。