javascript - Highcharts:使用 CSV 的热图

Question

我正在尝试通过 CSV 文件加载数据。现在，如果我已经将它作为隐藏的 div 放在页面上，它的效果就很好。但尝试通过 Jquery $.get 从 CSV 文件加载它是行不通的。 x 轴和 y 轴显示，但热图本身不显示。

JavaScript 看起来像这样(没有实际的临时文件):

$.get('http://www.urltofile.com/cell001.csv', function(csv) {
  generateHeatMap($('#heatmapBody'),csv);
});

function generateHeatMap(target,data) {
  target.highcharts({
    chart: {
        type: 'heatmap',
        //height: highChartsArguments.chartHeight
        margin: [60, 10, 80, 50]
    },
    boost: {
        useGPUTranslations: true
    },
    title: {
        text: 'Highcharts extended heat map',
        style: {
            color: 'black',
            fontSize: '12px',
            fontFamily: 'Verdana'
        }
    },
    xAxis: {
        type: 'text',
        min: 0,
        max: 427,
        labels: {
            align: 'left',
            x: 5,
            y: 14,
            format: '{value}' // long month
        },
        showLastLabel: false,
        tickLength: 16
    },
    yAxis: {
        title: {
            text: null
        },
        labels: {
            format: '{value}'
        },
        minPadding: 0,
        maxPadding: 0,
        startOnTick: false,
        endOnTick: false,
        tickPositions: [0, 16, 32, 48, 64, 80, 96, 112, 133],
        tickWidth: 1,
        min: 0,
        max: 133,
        reversed: true
    },
    colorAxis: {
        max: 1.5,
        min: -1.5,
        minColor: '#00FF00',
        maxColor: '#FF0000',
        stops: [
            [0.0, '#00FF00'],
            [0.5, '#003319'],
            [0.9, '#FF0000'],
            [1, '#FF0000']
        ]
    },
    credits: {
        enabled: false
    },
    legend: {
        enabled: true,
        align: 'right',
        layout: 'vertical',
        margin: 0,
        verticalAlign: 'top',
        symbolHeight: 60
    },
    series: [{
            name: 'heatmap',
            data: {
                csv: data
            },
            boostThreshold: 100,
            borderWidth: 0,
            nullColor: '#EFEFEF',
            tooltip: {
                headerFormat: 'Test<br/>',
                pointFormat: '{point.x} {point.y}: <b>{point.value}</b>'
            },
            turboThreshold: Number.MAX_VALUE // #3404, remove after 4.0.5 release
        }],
    exporting: {
        enabled: false
    }
  });
}

CSV 超过 100K 行。这可能会造成问题吗？作为示例，它看起来像

Gene,Label,zScore
0,0,3.630958
0,1,1.547901
0,2,-0.604027
0,3,0.486755
0,4,-0.359456
0,5,0.228968
0,6,3.197601
0,7,1.554732
0,8,0.374111

如有任何帮助，我们将不胜感激。

Answer 1

您加载的数据不正确。 Series 对象不负责处理 csv 数据。如果您使用data module ，您应该将数据从系列选项移动到顶级选项，如下所示:

  data: { // this is how you load the with data module
    csv: data
  },

  series: [{
  ... // here, options for series goes but not data
  }]

将您的代码与官方示例进行比较:http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/maps/demo/heatmap/