1
https://jsfiddle.net/43Tesseracts/qmhhc089/Display-Punkt-Stil auf Legende in chart.js
für diesen ersten Datensatz der Chart XPData, wie kann ich die Legende Stil setzen Sie den Punkt anstelle der Leitung zu benutzen?
Ich hoffe, alles was ich tun muss, ist hinzuzufügen: showLines: false nach der Scatter Line Chart docs, aber ich kann nicht herausfinden, wo diese Einstellung zu setzen.
Hier wird der Datensatz ist (siehe Geige):
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>
Awe Mist ... Ich habe es nicht bemerkt, aber jetzt benutzen sie alle Punkt Stil. Ist es nicht möglich, die eine Datenmenge nur auf Punkte zu setzen? Ich möchte keine Punkte in den Nur-Zeilen-Daten! – 43Tesseracts
Ich glaube nicht, so ist es möglich, auf einzelne Datenreihen anzuwenden –