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/

Highcharts：使用CSV进行热图

1 个答案: