highcharts 在热图上显示数据

wvyml7n5  于 2022-11-10  发布在  Highcharts
关注(0)|答案(1)|浏览(167)

目前我正试图找到一种方法来显示时间序列数据通过一个热图通过 highcharts ,我想知道是否有一种方法来绘制这种方式的数据,而不诉诸于使用CSV。下面的链接是我想重现的图表类型:
https://www.highcharts.com/demo/heatmap-canvas
目前这是我在这方面的尝试,通过使用数组来存储数据,但由于某种原因,数据根本没有绘制...

Highcharts.chart('container', {

    data: {
        //csv: document.getElementById('csv').innerHTML
    },

    chart: {
        type: 'heatmap'
    },

    boost: {
        useGPUTranslations: true
    },

    title: {
        text: 'Highcharts heat map',
        align: 'left',
        x: 40
    },

    subtitle: {
        text: 'Temperature variation by day and hour through 2017',
        align: 'left',
        x: 40
    },

    xAxis: {
        type: 'datetime',
        min: Date.UTC(2017, 0, 1),
        max: Date.UTC(2017, 0, 8, 23, 59, 59),
        labels: {
            align: 'left',
            x: 5,
            y: 14,
            format: '{value:%B}' // long month
        },
        showLastLabel: false,
        tickLength: 16
    },

    yAxis: {
        title: {
            text: null
        },
        labels: {
            format: '{value}:00'
        },
        minPadding: 0,
        maxPadding: 0,
        startOnTick: false,
        endOnTick: false,
        tickPositions: [0, 6, 12, 18, 24],
        tickWidth: 1,
        min: 0,
        max: 23,
        reversed: true
    },

    colorAxis: {
        stops: [
            [0, '#3060cf'],
            [0.5, '#fffbbc'],
            [0.9, '#c4463a'],
            [1, '#c4463a']
        ],
        min: -15,
        max: 25,
        startOnTick: false,
        endOnTick: false,
        labels: {
            format: '{value}℃'
        }
    },

    series: [{
          data: [[2017-01-01,0,2.7],[2017-01-02,0,1.7],[2017-01-03,0,-0.7],[2017-01-04,0,2.5],[2017-01-05,0,-6.6],[2017-01-06,0,-9.2],[2017-01-07,0,1.7],[2017-01-08,0,-1.6]],
        boostThreshold: 100,
        borderWidth: 0,
        nullColor: '#EFEFEF',
        colsize: 24 * 36e5, // one day
        tooltip: {
            headerFormat: 'Temperature<br/>',
            pointFormat: '{point.x:%e %b, %Y} {point.y}:00: <b>{point.value} ℃</b>'
        },
        turboThreshold: Number.MAX_VALUE // #3404, remove after 4.0.5 release
    }]

});

指向我的JSFiddle的链接:https://jsfiddle.net/4581qd3b/

xv8emn3q

xv8emn3q1#

你有几种方法来给定数据,简单的对象或数组。

data1: [{
    name: 'Point 1',
    color: '#00FF00',
    y: 1
  }, {
    name: 'Point 2',
    color: '#FF00FF',
    y: 5
  }],
  data2: [0, 5, 3, 5],
  data3: [
    [1588771800000, 2.2, 75.16],
    [1588858200000, 2, 75.93],
    [1588944600000, 2, 77.53],
    [1589203800000, 2, 78.75],
    [1589290200000, 2, 77.85],
    [1589376600000, 2.4, 76.91],
    [1589463000000, 2, 77.39],
    [1589549400000, 2, 76.93],
    [1589808600000, 2, 78.74]
  ]

现场演示:https://jsfiddle.net/BlackLabel/m84f3spx/2/

相关问题