在chart.js中的图例上显示点样式 [英] Display point style on legend in chart.js
本文介绍了在chart.js中的图例上显示点样式的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
https://jsfiddle.net/43Tesseracts/qmhhc089/
对于此图表的第一个数据集 XPData ，如何设置图例样式以使用点而不是线？
For this chart's first dataset XPData, how do I set the legend style to use the point instead of the line?
我希望我要做的就是添加： showLines：false 根据散布折线图文档，但我不知道该设置在何处。
I'm hoping all I need to do is add: showLines: false according to the Scatter Line Chart docs, but I can't figure out where to put this setting.
以下是数据集（请参见小提琴）：
Here is the data set (see fiddle):
var XPData = {
label: 'XP Earned',
//fill: false,
//backgroundColor: "rgba(0,0,0,0)",
//borderColor: "rgba(0,0,0,0)",
pointBorderColor: "#444",
pointBackgroundColor: "#444",
data: [],
showLines: false,
};
/*jshint esversion: 6 */
var ctx = document.getElementById("myChart");
class DataPoint {
constructor(x, y) {
this.x = x;
this.y = y;
}
}
var days = 85;
var chillax = 72.5;
// XP DATA SET
var XPData = {
label: 'XP Earned',
//fill: false,
//backgroundColor: "rgba(0,0,0,0)",
//borderColor: "rgba(0,0,0,0)",
pointBorderColor: "#444",
pointBackgroundColor: "#444",
data: [],
showLines: false,
options: {
legend: {
labels: {
usePointStyle: true
}
}
},
};
// XP Data generation
var total = 0;
for (var i = 0; i < 35; i++) {
total += 10 * Math.floor(Math.random() + 0.5);
total += 5 * Math.floor(Math.random() + 0.5);
total += 5 * Math.floor(Math.random() + 0.5);
var p = new DataPoint(i + 1, total);
XPData.data.push(p);
}
// XP Trend Data
var XPTrendData = {
label: 'XP Trend',
fill: false,
pointRadius: 0,
lineTension: 0,
borderDash: [5, 5],
borderColor: "#ccc",
backgroundColor: "rgba(0,0,0,0)",
data: [],
};
// XP Trend calculaion
var total = 0;
var days_so_far = XPData.data.length;
total = XPData.data[days_so_far - 1].y;
var average_per_day = total / days_so_far;
var trend_total = total;
for (i = days_so_far; i < days; i++) {
p = new DataPoint(i, trend_total);
XPTrendData.data.push(p);
trend_total += average_per_day;
}
// Chillax Line Data Set
var ChillaxLineData = {
label: 'Chillax Line',
pointRadius: 0,
backgroundColor: "rgba(0,0,0,0)",
borderColor: "#337AB7",
data: [],
};
// Chill Line Generation
for (i = 1; i < days; i++) {
p = new DataPoint(i, Math.floor(i * chillax * 10 / days));
ChillaxLineData.data.push(p);
}
var options = {
scaleUse2Y: true,
scales: {
xAxes: [{
type: 'linear',
position: 'bottom',
ticks: {
max: days,
min: 0,
stepSize: 5,
},
scaleLabel: {
display: true,
labelString: 'Days of Class'
},
}],
yAxes: [{
id: "y-axis-XP",
position: 'right',
ticks: {
max: 1000,
min: 0,
stepSize: 50,
},
scaleLabel: {
display: true,
labelString: 'XP'
},
gridLines: {},
},
{
id: "y-axis-percent",
position: 'left',
ticks: {
max: 100,
min: 0,
stepSize: 5,
},
scaleLabel: {
display: true,
labelString: 'Percent'
},
gridLines: {
/*show: true,
color: "rgba(255, 255, 255, 1)",
lineWidth: 1,
drawOnChartArea: true,
drawTicks: true,
zeroLineWidth: 1,
zeroLineColor: "rgba(255,255,255,1)", */
},
}
],
},
title: {
text: 'A Map of Your Progress',
display: true,
},
legend: {
position: 'top',
},
};
var data = {
datasets: [XPData,
XPTrendData,
ChillaxLineData,
]
};
var myChart = new Chart(ctx, {
type: 'line',
data: data,
options: options,
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.6/Chart.bundle.min.js"></script>
<canvas id="myChart" width="400" height="250"></canvas>
推荐答案
使用当前库
< script src = https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart .js>< / script>
加放
legend: {
labels: {
usePointStyle: true,
},
}
内部选项而不是内部 var XPData = {...}
var ctx = document.getElementById("myChart");
class DataPoint {
constructor(x, y) {
this.x = x;
this.y = y;
}
}
var days = 85;
var chillax = 72.5;
// XP DATA SET
var XPData = {
label: 'XP Earned',
fill: false,
backgroundColor: "#444",
borderColor: "#444",
pointBorderColor: "#444",
pointBackgroundColor: "#444",
data: [],
showLine: false,
};
// XP Data generation
var total = 0;
for (var i = 0; i < 35; i++) {
total += 10 * Math.floor(Math.random() + 0.5);
total += 5 * Math.floor(Math.random() + 0.5);
total += 5 * Math.floor(Math.random() + 0.5);
var p = new DataPoint(i + 1, total);
XPData.data.push(p);
}
// XP Trend Data
var XPTrendData = {
label: 'XP Trend',
fill: false,
pointRadius: 0,
lineTension: 0,
borderDash: [5, 5],
borderColor: "#ccc",
backgroundColor: "rgba(0,0,0,0)",
data: [],
};
// XP Trend calculaion
var total = 0;
var days_so_far = XPData.data.length;
total = XPData.data[days_so_far - 1].y;
var average_per_day = total / days_so_far;
var trend_total = total;
for (i = days_so_far; i < days; i++) {
p = new DataPoint(i, trend_total);
XPTrendData.data.push(p);
trend_total += average_per_day;
}
// Chillax Line Data Set
var ChillaxLineData = {
label: 'Chillax Line',
pointRadius: 0,
backgroundColor: "rgba(0,0,0,0)",
borderColor: "#337AB7",
data: [],
};
// Chill Line Generation
for (i = 1; i < days; i++) {
p = new DataPoint(i, Math.floor(i * chillax * 10 / days));
ChillaxLineData.data.push(p);
}
var options = {
scaleUse2Y: true,
scales: {
xAxes: [{
type: 'linear',
position: 'bottom',
ticks: {
max: days,
min: 0,
stepSize: 5,
},
scaleLabel: {
display: true,
labelString: 'Days of Class'
},
}],
yAxes: [{
id: "y-axis-XP",
position: 'right',
ticks: {
max: 1000,
min: 0,
stepSize: 50,
},
scaleLabel: {
display: true,
labelString: 'XP'
},
gridLines: {},
}, {
id: "y-axis-percent",
position: 'left',
ticks: {
max: 100,
min: 0,
stepSize: 5,
},
scaleLabel: {
display: true,
labelString: 'Percent'
},
gridLines: {
/*show: true,
color: "rgba(255, 255, 255, 1)",
lineWidth: 1,
drawOnChartArea: true,
drawTicks: true,
zeroLineWidth: 1,
zeroLineColor: "rgba(255,255,255,1)", */
},
}
],
},
title: {
text: 'A Map of Your Progress',
display: true,
},
legend: {
labels: {
usePointStyle: true,
},
}
};
var data = {
datasets: [XPData,
XPTrendData,
ChillaxLineData,
]
};
var myChart = new Chart(ctx, {
type: 'line',
data: data,
options: options,
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.js"></script>
<canvas id="myChart" width="400" height="250"></canvas>
这篇关于在chart.js中的图例上显示点样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
