Editar información sobre herramientas en ChartJS

Tengo algunos problemas con la personalización de la información sobre herramientas chartjs.

var animationComplete = function () { var self = this; Chart.helpers.each(self.datasets[0].points, function (point, index) { Chart.helpers.each(self.datasets, function (dataset) { new Chart.MultiTooltip({ x: point.x, y: dataset.points[index].y, xPadding: self.options.tooltipXPadding, yPadding: self.options.tooltipYPadding, xOffset: self.options.tooltipXOffset, //yOffset: self.options.tooltipYOffset, fillColor: self.options.tooltipFillColor, textColor: self.options.tooltipFontColor, fontFamily: self.options.tooltipFontFamily, fontStyle: self.options.tooltipFontStyle, fontSize: self.options.tooltipFontSize, titleTextColor: self.options.tooltipTitleFontColor, titleFontFamily: self.options.tooltipTitleFontFamily, titleFontStyle: self.options.tooltipTitleFontStyle, titleFontSize: self.options.tooltipTitleFontSize, cornerRadius: self.options.tooltipCornerRadius, labels: [dataset.points[index].value], legendColors: [{ fill: dataset.strokeColor, stroke: dataset.strokeColor }], legendColorBackground: self.options.multiTooltipKeyBackground, //title: point.label, //title: false, title: '', chart: self.chart, ctx: self.chart.ctx, custom: self.options.customTooltips }).draw() }); self.chart.ctx.font = Chart.helpers.fontString(self.fontSize, self.fontStyle, self.fontFamily) self.chart.ctx.textAlign = 'center'; self.chart.ctx.textBaseline = "middle"; self.chart.ctx.fillStyle = "#666"; self.chart.ctx.fillText(point.label, point.x, self.scale.startPoint); }); }; var ctx = document.getElementById("weeksChart").getContext("2d"); window.weeksChart = new Chart(ctx).Line(dataWeeks, { responsive: true, pointDot: true, datasetStrokeWidth: 0.5, bezierCurve : false, scaleSteps: 2, scaleLabel: "", //tooltipTemplate: "", tooltipTemplate: "", tooltipFillColor: "transparent", tooltipFontColor: "#000", tooltipFontSize: 14, tooltipXOffset: -10, //tooltipYOffset: -100, //tooltipYOffset: 100, tooltipYPadding: 0, showTooltips: true, scaleShowLabels: false, scaleFontColor: "transparent", onAnimationComplete: function () { animationComplete.apply(this) }, tooltipEvents: [] }); 

Es posible:

  1. para eliminar los cuadrados de colores ?;
  2. para cambiar el color de fuente de los números, entonces en la línea azul los números tendrán una fuente azul, y en la línea roja los números serán rojos ?;
  3. para mover los números más altos en el eje Y? (Intenté agregar / cambiar líneas 30,78,79 en mi violín, pero nada funciona);
  4. Cómo eliminar los títulos de información sobre herramientas? (Todo lo que me funciona ahora es establecer el title: '', en la línea 49. La línea 48 no funciona);
  5. para agregar el símbolo de la derecha después del número? (Intenté hacer esto -> tooltipTemplate: "" , pero no funciona …)

Aquí está mi violín

1. para eliminar los cuadrados de colores ?;

2. para cambiar el color de fuente de los números, entonces en la línea azul los números tendrán una fuente azul, y en la línea roja los números serán rojos ?;

4. ¿Para eliminar títulos de información sobre herramientas? (Todo lo que me funciona ahora es establecer el título: ”, en la línea 49. La línea 48 no funciona);

5.para agregar el símbolo ° justo después del número? (Intenté hacer esto -> tooltipTemplate: “<% = value + '°'%>“, pero no funciona …)

Todo esto se puede hacer simplemente cambiando del constructor de MultiTooltip a un constructor de Tooltip (serie única) (la información de herramienta de la serie única no tiene un cuadrado de color o un título) y ajustando las opciones textColor y text como

 new Chart.Tooltip({ x: point.x, y: dataset.points[index].y, xPadding: self.options.tooltipXPadding, yPadding: self.options.tooltipYPadding, fillColor: self.options.tooltipFillColor, textColor: dataset.strokeColor, fontFamily: self.options.tooltipFontFamily, fontStyle: self.options.tooltipFontStyle, fontSize: self.options.tooltipFontSize, caretHeight: self.options.tooltipCaretSize, cornerRadius: self.options.tooltipCornerRadius, cornerRadius: self.options.tooltipCornerRadius, text: dataset.points[index].value + '°', chart: self.chart, custom: self.options.customTooltips }).draw() 

3. para mover los números más altos en el eje Y? (Intenté agregar / cambiar líneas 30,78,79 en mi violín, pero nada funciona);

Supongo que te refieres a las tags del eje x que están en la parte superior (no pude ver las líneas 78 y 79 en tu violín, y 30 no parecían estar relacionadas).

Si se trata de un ligero cambio, puede hacerlo fácilmente ajustando el parámetro y en la línea que escribe la etiqueta.

 self.chart.ctx.fillText(point.label, point.x, self.scale.startPoint - 2); 

Sin embargo, si desea avanzar mucho más, necesita hacer algo de espacio en la parte superior del gráfico o la parte superior de las tags se recortará. Puede hacerlo extendiendo el gráfico y anulando scale.startPoint en la función de dibujo.

Asi que

 Chart.types.Line.extend({ name: "LineAlt", draw: function (data) { this.scale.startPoint = 25; Chart.types.Line.prototype.draw.apply(this, arguments); } }); 

y luego usando LineAlt en lugar de Line

 window.weeksChart = new Chart(ctx).LineAlt(dataWeeks, { 

te permitirá hacer

 self.chart.ctx.fillText(point.label, point.x, self.scale.startPoint - 12); 

sin recortar la etiqueta

Fiddle – http://jsfiddle.net/kphmkL0e/