每个细胞的不同颜色的图表

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

        }

    }

小提琴here。生产：