Настройка Chart.js устранения

Question

Есть некоторые проблемы с Chart.js

1) можно ли перемещать нижние метки на верхней части диаграммы? 2) Можно ли скрыть левую этикетку с первой серой линией? 3) Можно ли настроить постоянные подсказки (чтобы показать температуру) на каждой точке, а не на всплывающих подсказках?

Вот мой график http://jsfiddle.net/JohnnyJuarez/ojc09hv4/:

<canvas id="weeksChart" width="651" height="335"></canvas> 


var dayTemperatureArray = [-5, 14, 15, 15, 17, 18, 19, 21, 22, 25, 24, 20, 19, 16]; 
var nightTemperatureArray = [-10, 4, 5, 6, 8, 11, 12, 15, 17, 15, 13, 12, 11, 9]; 

var dataWeeks = { 
    labels: ["16.02", "17.02", "18.02", "19.02", "20.02", "21.02", "22.02", "23.02", "24.02", "25.02", "26.02", "27.02", "28.02", "01.03"], 
    datasets: [ 
     { 
      label: "Days temperature chart", 
      fillColor: "transparent", 
      strokeColor: "rgba(244, 6, 6, 1)", 
      data: dayTemperatureArray 
     }, 
     { 
      label: "Nights temperature chart", 
      strokeColor: "#3f6bf5", 
      data: nightTemperatureArray 
     } 
    ] 
    }; 

var ctx = document.getElementById("weeksChart").getContext("2d"); 
window.weeksChart = new Chart(ctx).Line(dataWeeks, { 
    responsive: true, 
    pointDot: true, 
    datasetStrokeWidth: 0.5, 
    scaleSteps: 2, 
    scaleLabel: "<%=value + '°'%>", 
    tooltipTemplate: "<%= value %>", 
    showTooltips: true 

}); 

Thanx много заранее!

p.s. пожалуйста, не JQuery, если это возможно :-)

Answer 1

Давайте начнем с самого простого один первый

2) можно ли скрыть оставшиеся этикетки с первой серой линией?

Я предполагаю, что вы имели в виду ярлыки оси y. Вы можете установить опцию scaleShowLabels ложна в параметрах диаграммы, чтобы скрыть ось у метки

window.weeksChart = new Chart(ctx).Line(dataWeeks, { 
    scaleShowLabels: false, 
    ... 

---

1) можно ли перемещать нижние метки на верхней части диаграммы?

Я предполагаю, что вы имеете в виду метки оси x. У Chart.js нет прямой возможности для этого. Однако вы можете скрыть фактические метки оси x и нарисовать метки оси x в верхней части диаграммы самостоятельно.

Опять же, Chart.js не имеет возможности скрывать метки оси X, но, к счастью, есть возможность контролировать цвет шрифта шкалы. Просто установите его на прозрачный, и ваши исходные метки оси X теперь скрыты!

window.weeksChart = new Chart(ctx).Line(dataWeeks, { 
    scaleFontColor: "transparent", 
    ... 

Теперь рисунок меток оси x в верхней части диаграммы. Для того, чтобы спасти нас от необходимости расширения диаграммы, мы можем добавить обработчик событий после анимации и сделать это в том, что, как и

window.weeksChart = new Chart(ctx).Line(dataWeeks, { 
    onAnimationComplete: function() { 
      animationComplete.apply(this) 
    } 
    ... 

с

var animationComplete = function() { 
    var self = this; 

    Chart.helpers.each(self.datasets[0].points, function (point, index) { 
     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); 
    }); 
}; 

Мы просто перебрать все точки в одном из набор данных и добавление меток (scale.startPoint - верхний край области диаграммы)

Примечание. Почему мы устанавливаем шрифт, выравнивание и т. д. на каждую итерацию? Это потому, что мы добавляем всплывающие подсказки.

---

3) можно ли создать постоянные всплывающие подсказки (показывать температуру) на каждой точке вместо всплывающих подсказок при наведении?

Первым шагом будет демонстрация всплывающих подсказок. Это довольно просто, хотя и немного утомительно. Мы прокручиваем всю точку оси x, строим метку (просматривая каждый набор данных), а затем создаем всплывающую подсказку (к счастью, для этого мы можем использовать функцию Chart.MultiTooltip.

Мы добавляем его в тот же цикл, который мы использовали для создания новых меток оси X. Поскольку нам нужно покрасить наши всплывающие подсказки, нам нужно получить и сохранить набор цветов в массиве (который мы передаем функции MultiTooltip - нам нужно сделать это только один раз, поэтому мы вынимаем его из цикла.

модифицированная функция animationComplete теперь это

var animationComplete = function() { 
    var self = this; 

    var tooltipColors = [] 
    Chart.helpers.each(self.datasets, function (dataset) { 
     tooltipColors.push({ 
      fill: dataset.strokeColor, 
      stroke: dataset.strokeColor 
     }) 
    }); 

    Chart.helpers.each(self.datasets[0].points, function (point, index) { 
     var labels = [] 
     var total = 0; 
     Chart.helpers.each(self.datasets, function (dataset) { 
      labels.push(dataset.points[index].value) 
      total += Number(dataset.points[index].y); 
     }); 

     new Chart.MultiTooltip({ 
      x: point.x, 
      y: total/2, 
      xPadding: self.options.tooltipXPadding, 
      yPadding: self.options.tooltipYPadding, 
      xOffset: self.options.tooltipXOffset, 
      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: labels, 
      legendColors: tooltipColors, 
      legendColorBackground: self.options.multiTooltipKeyBackground, 
      title: point.label, 
      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); 
    }); 
}; 

это выглядит комплекс, но все, что мы делаем, пропусканием варианты, которые мы копируем из вариантов экземпляра диаграммы для функции MultiTooltip.

Всплывающие подсказки все шоу когда анимация завершена. ОДНАКО, как только вы наводите указатель мыши на график, все они исчезают! Это потому, что t он отображает экземпляр, который прослушивает несколько событий, чтобы решить, следует ли проверять, следует ли показывать всплывающие подсказки - один из них - mousemove (и это заставляет его перерисовывать диаграмму, уничтожая все наши жесткие всплывающие подсказки и, если нам повезет, она рисует всплывающая подсказка, основанная на точке, над которой курсирует наша мышь)

Это настраиваемый вариант. Итак, все, что нам нужно сделать, это удалить все такие события.

window.weeksChart = new Chart(ctx).Line(dataWeeks, { 
    tooltipEvents: [] 
    ... 

---

Рабочая скрипку - http://jsfiddle.net/fuodxsfv/

---

Если ваш график не достаточно широк, вы будете иметь всплывающие подсказки (в основном средние 2 из них) перекрываются (конечно, вы могли бы включить логику в выше петля, чтобы справиться с этим), но anyhoo, на самом деле это были всплывающие подсказки!