@@ -286,6 +287,48 @@
return rating_history[index];
};
+ var originalDraw = Chart.controllers.scatter.prototype.draw;
+ Chart.helpers.extend(Chart.controllers.scatter.prototype, {
+ draw: function () {
+ var chart = this.chart;
+ var yHighlight = chart.config.options.yHighlight;
+
+ if (yHighlight != null) {
+ var ctx = chart.chart.ctx;
+ var xaxis = chart.scales['x-axis-1'];
+ var yaxis = chart.scales['y-axis-1'];
+
+ ctx.save();
+ yHighlight.forEach(range => {
+ var yRangeBeginPixel = yaxis.getPixelForValue(range.begin);
+ var yRangeEndPixel = yaxis.getPixelForValue(range.end);
+
+ if (range.begin >= yaxis.end || range.end <= yaxis.begin) {
+ return;
+ }
+
+ yRangeEndPixel = Math.max(yaxis.top + 1, yRangeEndPixel);
+ yRangeBeginPixel = Math.min(yaxis.bottom - 1, yRangeBeginPixel);
+
+ if (yRangeBeginPixel < yRangeEndPixel) {
+ return;
+ }
+
+ ctx.fillStyle = range.color;
+ ctx.fillRect(
+ xaxis.left + 1,
+ yRangeEndPixel,
+ xaxis.right - xaxis.left,
+ yRangeBeginPixel - yRangeEndPixel,
+ );
+ });
+ ctx.restore();
+ }
+ originalDraw.apply(this, arguments);
+ }
+ });
+
+
window.rating_chart = new Chart(ctx, {
type: 'scatter',
data: {
@@ -293,8 +336,8 @@
label: 'rating',
backgroundColor: 'rgb(0,0,0,0)',
borderColor: '#A31515',
- pointBackgroundColor: '#A31515',
- pointHoverBackgroundColor: '#FFF',
+ pointBackgroundColor: '#FFF',
+ pointHoverBackgroundColor: '#A31515',
pointRadius: 5,
pointHoverRadius: 5,
showLine: true,
@@ -361,7 +404,44 @@
fontStyle: tooltipModel._bodyFontStyle,
}).show();
},
- }
+ },
+ yHighlight: [
+ {
+ begin: 0,
+ end: 1000,
+ color: 'rgb(153, 153, 153, 0.43)'
+ },
+ {
+ begin: 1000,
+ end: 1200,
+ color: 'rgb(0, 169, 0, 0.4)'
+ },
+ {
+ begin: 1200,
+ end: 1500,
+ color: 'rgb(0, 0, 255, 0.4)'
+ },
+ {
+ begin: 1500,
+ end: 1800,
+ color: 'rgb(128, 0, 128, 0.37)'
+ },
+ {
+ begin: 1800,
+ end: 2200,
+ color: 'rgb(255, 177, 0, 0.4)'
+ },
+ {
+ begin: 2200,
+ end: 3000,
+ color: 'rgb(238, 0, 0, 0.4)'
+ },
+ {
+ begin: 3000,
+ end: 4000,
+ color: 'rgb(160, 0, 0, 0.6)'
+ }
+ ],
}
});