ChartJS показва подсказка при максимална/минимална стойност

Бих искал да покажа подсказка в горната точка от данни на набор от данни в моята диаграма. По този начин потребителят вижда стойност за максималните и минималните точки от данни. Това помага за незабавното разбиране на графиката.

Трябва да изглежда донякъде така: очакван краен резултат за потребителя

Създадох JSFiddle с кода тук: https://jsfiddle.net/h2zscw6s/1/

За справка, моля, намерете и моята конфигурация на диаграмата по-долу. Това е в coffeescript, но нямам нищо против да публикувате отговори в обикновен javascript.

dataWeather = [
  {
    label: 'January'
    value: 22
  }
  {
    label: 'February'
    value: 23
  }
  {
    label: 'March'
    value: 24
  }
  {
    label: 'May'
    value: 26
  }
  {
    label: 'June'
    value: 30
  }
  {
    label: 'July'
    value: 34
  }
  {
    label: 'August'
    value: 38
  }
  {
    label: 'September'
    value: 36
  }
  {
    label: 'October'
    value: 30
  }
  {
    label: 'November'
    value: 28
  }
  {
    label: 'December'
    value: 26
  }
]
dataPrices = [
  {
    label: 'January'
    value: 5000
  }
  {
    label: 'February'
    value: 4500
  }
  {
    label: 'March'
    value: 4450
  }
  {
    label: 'May'
    value: 3700
  }
  {
    label: 'June'
    value: 3700
  }
  {
    label: 'July'
    value: 3000
  }
  {
    label: 'August'
    value: 2900
  }
  {
    label: 'September'
    value: 3100
  }
  {
    label: 'October'
    value: 3200
  }
  {
    label: 'November'
    value: 3900
  }
  {
    label: 'December'
    value: 5500
  }
]

class WeatherPriceChart
  setWeatherData: (weatherData)->
    @weatherData = weatherData
  setPriceData: (priceData)->
    @priceData = priceData
  minPrice: ->
    _.sortBy(@priceData, (w)-> w.value)[0]?.value || 0
  maxPrice: ->
    _.sortBy(@priceData, (w)-> -w.value)[0]?.value || 0
  minTemperature: ->
    _.sortBy(@weatherData, (w)-> w.value)[0]?.value || 0
  maxTemperature: ->
    _.sortBy(@weatherData, (w)-> -w.value)[0]?.value || 0
  isMaxTemperature: (value)->
    @maxTemperature() == value
  isMinTemperature: (value)->
    @minTemperature() == value
  isMaxPrice: (value)->
    @maxPrice() == value
  isMinPrice: (value)->
    @minPrice() == value
  getLabels: ->
    _.map(@weatherData, (w)-> w.label)
  getWeatherDataPoints: ->
    _.map(@weatherData, (w)-> w.value)
  getPriceDataPoints: ->
    _.map(@priceData, (w)-> w.value)
  getNormalizedWeatherDataPoints: ->
    data = @weatherData
    min = -10
    max = 60
    _.map data, (d)->
      norm = d.value + (min * -1)
      maxed = max + (min * -1)
      norm / maxed * 100
  getNormalizedPriceDataPoints: ->
    data = @priceData
    max = @maxPrice() * 2.5
    _.map data, (d)->
      d.value / max * 100


chart = new WeatherPriceChart
chart.setWeatherData(dataWeather)
chart.setPriceData(dataPrices)

ctx = document.getElementById('myChart')
myChart = new Chart(ctx,
  type: 'line',
  data:
    xLabels: chart.getLabels(),
    yLabels: [""],
    datasets: [
      {
        label: 'Temperature'
        data: chart.getWeatherDataPoints()
        backgroundColor: 'rgba(239,88,42,0.2)'
        borderColor: 'rgba(239,88,42,0.5)'
        borderWidth: 1
      },
      {
        label: 'Prices'
        data: chart.getNormalizedPriceDataPoints()
        backgroundColor: 'rgba(22,195,245,0.2)'
        borderColor:'rgba(22,195,245,0.4)'
        borderWidth: 1
      }
  ]
  options: 
    scales:
      yAxes: [
        {
          ticks: {
            beginAtZero: false,
            display: false
          },
          display: false
        },
      ]
    legend:
      display: false              
  )

chart.js coffeescript
person Hendrik    schedule 16.11.2016    source източник

Отговори (1)


arrow_upward
0
arrow_downward

Намерих отговор на тази опция и го публикувах в свързания jsfiddle. Трябваше да добавя плъгин, който да показва всички етикети. След това динамично реши дали да покаже тази подсказка или не.

Chart.pluginService.register
  beforeRender: (chart) ->
    if chart.config.options.showAllTooltips
      # create an array of tooltips
      # we can't use the chart tooltip because there is only one tooltip per chart
      chart.pluginTooltips = []
      chart.config.data.datasets.forEach (dataset, i) ->
        min = _.min(dataset.data, (d)-> d)
        max = _.max(dataset.data, (d)-> d)
        minShown = false
        maxShown = false
        chart.getDatasetMeta(i).data.forEach (sector, j) ->
          isMax = dataset.data[j] == max
          isMin = dataset.data[j] == min
          # only show the min and the max once. we can have duplicates min/maxes
          if isMax && !maxShown || isMin && !minShown
            minShown = true if isMin
            maxShown = true if isMax
            tooltip = new (Chart.Tooltip)({
              _chart: chart.chart
              _chartInstance: chart
              _data: chart.data
              _options: chart.options.tooltips
              _active: [ sector ]
            }, chart)
            chart.pluginTooltips.push(tooltip)
          return
        return
      # turn off normal tooltips
      chart.options.tooltips.enabled = false
    return
  afterDraw: (chart, easing) ->
    if chart.config.options.showAllTooltips
      # we don't want the permanent tooltips to animate, so don't do anything till the animation runs atleast once
      if !chart.allTooltipsOnce
        if easing != 1
          return
        chart.allTooltipsOnce = true
      # turn on tooltips
      chart.options.tooltips.enabled = true
      Chart.helpers.each chart.pluginTooltips, (tooltip) ->
        tooltip.initialize()
        tooltip.update()
        # we don't actually need this since we are not animating tooltips
        tooltip.pivot()
        tooltip.transition(easing).draw()
        return
      chart.options.tooltips.enabled = false
    return
person Hendrik    schedule 16.11.2016