javascript - 每个单元格具有不同颜色的图表

Question

我正在为我的网站工作，我想创建这样一个图表，其中图表的每个单元格都有不同的颜色，如下图所示:

我已经在 Google Charts 和其他各种基于 javascript 的 api 中搜索了图表，但没有成功。热烈欢迎任何解决方案。

Answer 1

使用 highcharts，您可以使用 Renderer.rect 来做到这一点来电。在图表上完成以下代码，循环 y 和 x 刻度，在每个单元格中添加一个矩形。

function (chart) { // on complete

    var xAxis = chart.xAxis[0],
        yAxis = chart.yAxis[0],
        xTicks = xAxis.tickPositions,
        yTicks = yAxis.tickPositions; // some need vars

    for (var i = 0; i < xTicks.length - 1; i++){
        for (var j = 0; j < yTicks.length - 1; j++){ // loop, xTicks and yTicks
            var startX = xAxis.toPixels(xTicks[i]);
            var stopX = xAxis.toPixels(xTicks[i+1]);
            var startY = yAxis.toPixels(yTicks[j+1]);
            var stopY = yAxis.toPixels(yTicks[j]); // determine intersections of ticks

            chart.renderer.rect(startX, startY, stopX-startX,stopY- startY, 0)
            .attr({
                fill: '#'+Math.floor(Math.random()*16777215).toString(16), // random color for http://www.paulirish.com/2009/random-hex-color-code-snippets/
                zIndex: 1
            })
            .add(); // place rect for each cell

        }

    }

fiddle here 。产生: