Question

我想在我的图表中的数据集的顶部数据点显示工具提示。这样，用户可以看到最大和最小数据点的值。这有助于立即理解图表。

它应该看起来像这样：

我在这里创建了一个包含代码的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              
  )

Answer 1

我找到了这个选项的答案并将其发布在链接的jsfiddle中。我必须添加一个可以显示所有标签的插件。那个人然后动态地决定是否显示这个工具提示。

NewLongFile = Path(1:LenPath) // '/' // AA(1:LenAA)
Len_NewLongFile = LengthString(NewLongFile)

ChartJS显示最大/最小值的工具提示

1 个答案: