Javascript 在chart.js中在直线上绘制点
我正在使用chart.js绘制简单的折线图。我想在我的直线上显示红色的点。例如,我将一个数组作为1到100之间的数字数据集传递。我想让红色显示那些是偶数的点。这在chart.js中可能出现吗 我知道我可以遍历该数组,从该数组中取出偶数值,然后将该数组传递给数据集。在这方面你能帮忙吗。这是我的数据集代码 这是我的数据集Javascript 在chart.js中在直线上绘制点,javascript,jquery,charts,chart.js,chart.js2,Javascript,Jquery,Charts,Chart.js,Chart.js2,我正在使用chart.js绘制简单的折线图。我想在我的直线上显示红色的点。例如,我将一个数组作为1到100之间的数字数据集传递。我想让红色显示那些是偶数的点。这在chart.js中可能出现吗 我知道我可以遍历该数组,从该数组中取出偶数值,然后将该数组传递给数据集。在这方面你能帮忙吗。这是我的数据集代码 这是我的数据集 datasets: [ { label: 'Assay Values', fill: false,
datasets: [
{
label: 'Assay Values',
fill: false,
lineTension: 0,
backgroundColor: "rgba(75,192,192,0.4)",
borderColor: "rgba(75,192,192,1)",
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderWidth: 1,
borderJoinStyle: 'miter',
pointBorderColor: "rgba(75,192,192,1)",
pointBackgroundColor: "#fff",
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: "rgba(75,192,192,1)",
pointHoverBorderColor: "rgba(220,220,220,1)",
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
data: data.assay_value,
spanGaps: false
},
data.u值是包含数组的数组
假设
数据,任何类型的帮助都将不胜感激。分析值
包含一个数字数组(例如[65、59、80、81、56、55、40]
),并且您只希望图表显示偶数值,您可以使用下面的代码将数据数组处理成一个新数组,只保留偶数
请记住,还必须构建一个新的标签
数组,因为数据集数据数组的长度必须与图表标签的长度相同(因为数据中的每个索引都映射到相应的标签索引)
请注意,由于您在问题中没有提供有关标签
数组的任何详细信息,因此此代码假定您有一个名为标签
的数组,该数组包含一个字符串数组。您需要根据在实现中定义标签的方式来更改此设置
var evenData = [];
var newLabels = [];
data.assay_values.forEach(function(e, i) {
// only take the even values
if (e % 2 === 0) {
evenData.push(e);
newLabels.push(labels[i]);
}
});
然后更改chart.js图表配置以使用新标签和数据数组,如下所示
var data = {
labels: newLabels,
datasets: [{
label: 'Assay Values',
fill: false,
lineTension: 0,
backgroundColor: "rgba(75,192,192,0.4)",
borderColor: "rgba(75,192,192,1)",
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderWidth: 1,
borderJoinStyle: 'miter',
pointBorderColor: "rgba(75,192,192,1)",
pointBackgroundColor: "#fff",
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: "rgba(75,192,192,1)",
pointHoverBorderColor: "rgba(220,220,220,1)",
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
data: evenData,
spanGaps: false
}]
};
// configure your chart options here
var options = {};
// ctx is a jQuery instance or 2d context of the canvas of where we want to draw the chart.
var myLineChart = new Chart(ctx, {
type: 'line',
data: data,
options: options
});
我试过了,但没用,我问的和我们现在做的也有区别。实际上,我不想推送数组中的元素,因为我已经有了一个数组,我只想指定该数组中的一些点。例如,我已经绘制了一条1到100之间的线,并且有可用的数据集。我只想在图表中指明一些要点谢谢你的澄清,我会相应地更新我的答案,为你寻找一个解决方案。我得到了解决方案,兄弟不用担心:)