Javascript Highcharts X范围内的多种条形图颜色

在海图的同一条线上可能有不同颜色的数据点

我通过以下方法和使用，在同一条线上获得了多个点：

/**
 * Highcharts X-range series plugin
 */
(function (H) {
    var defaultPlotOptions = H.getOptions().plotOptions,
        columnType = H.seriesTypes.column,
        each = H.each,
        extendClass = H.extendClass,
        pick = H.pick,
        Point = H.Point,
        Series = H.Series;

defaultPlotOptions.xrange = H.merge(defaultPlotOptions.column, {
    tooltip: {
        pointFormat: '<span style="color:{point.color}">\u25CF</span> {series.name}: <b>{point.yCategory}</b><br/>'
    }
});
H.seriesTypes.xrange = H.extendClass(columnType, {
    pointClass: extendClass(Point, {
        // Add x2 and yCategory to the available properties for tooltip formats
        getLabelConfig: function () {
            var cfg = Point.prototype.getLabelConfig.call(this);

            cfg.x2 = this.x2;
            cfg.yCategory = this.yCategory = this.series.yAxis.categories && this.series.yAxis.categories[this.y];
            return cfg;
        }
    }),
    type: 'xrange',
    forceDL: true,
    parallelArrays: ['x', 'x2', 'y'],
    requireSorting: false,
    animate: H.seriesTypes.line.prototype.animate,

    /**
     * Borrow the column series metrics, but with swapped axes. This gives free access
     * to features like groupPadding, grouping, pointWidth etc.
     */
    getColumnMetrics: function () {
        var metrics,
            chart = this.chart;

        function swapAxes() {
            each(chart.series, function (s) {
                var xAxis = s.xAxis;
                s.xAxis = s.yAxis;
                s.yAxis = xAxis;
            });
        }

        swapAxes();

        this.yAxis.closestPointRange = 1;
        metrics = columnType.prototype.getColumnMetrics.call(this);

        swapAxes();

        return metrics;
    },

    /**
     * Override cropData to show a point where x is outside visible range
     * but x2 is outside.
     */
    cropData: function (xData, yData, min, max) {

        // Replace xData with x2Data to find the appropriate cropStart
        var crop = Series.prototype.cropData.call(this, this.x2Data, yData, min, max);

        // Re-insert the cropped xData
        crop.xData = xData.slice(crop.start, crop.end);

        return crop;
    },

    translate: function () {
        columnType.prototype.translate.apply(this, arguments);
        var series = this,
            xAxis = series.xAxis,
            metrics = series.columnMetrics,
            minPointLength = series.options.minPointLength || 0;

        H.each(series.points, function (point) {
            var plotX = point.plotX,
                plotX2 = xAxis.toPixels(H.pick(point.x2, point.x + (point.len || 0)), true),
                width = plotX2 - plotX,
                widthDifference;

            if (minPointLength) {
                widthDifference = width < minPointLength ? minPointLength - width : 0;
                plotX -= widthDifference / 2;
                plotX2 += widthDifference / 2;
            }

            plotX = Math.max(plotX, -10);
            plotX2 = Math.min(Math.max(plotX2, -10), xAxis.len + 10);

            point.shapeArgs = {
                x: plotX,
                y: point.plotY + metrics.offset,
                width: plotX2 - plotX,
                height: metrics.width
            };
            point.tooltipPos[0] += width / 2;
            point.tooltipPos[1] -= metrics.width / 2;
        });
    }
});

/**
 * Max x2 should be considered in xAxis extremes
 */
H.wrap(H.Axis.prototype, 'getSeriesExtremes', function (proceed) {
    var axis = this,
        dataMax,
        modMax;

    proceed.call(this);
    if (this.isXAxis) {
        dataMax = pick(axis.dataMax, Number.MIN_VALUE);
        each(this.series, function (series) {
            each(series.x2Data || [], function (val) {
                if (val > dataMax) {
                    dataMax = val;
                    modMax = true;
                }
            });
        });
        if (modMax) {
            axis.dataMax = dataMax;
        }
    }
});
}(Highcharts));


// THE CHART
Highcharts.chart('container', {
    chart: {
        type: 'xrange'
    },
    title: {
        text: 'Item List'
    },
    xAxis: {
        type: 'datetime',
        min: Date.UTC(2014, 11, 3)
    },
    yAxis: {
        title: '',
        categories: ['Item 1', 'Item 2'],
        reversed: true
    },
    series: [{
        name: 'Project 1',
        // pointPadding: 0,
        // groupPadding: 0,
        borderRadius: 5,
        pointWidth: 10,
        data: [{
            x: Date.UTC(2014, 11, 3),
            x2: Date.UTC(2014, 11, 4),
            y: 0
        }, {
            x: Date.UTC(2014, 11, 6),
            x2: Date.UTC(2014, 11, 7),
            y: 0
        },
        {
            x: Date.UTC(2014, 11, 9),
            x2: Date.UTC(2014, 11, 11),
            y: 0
        },
        {
            x: Date.UTC(2014, 11, 3),
            x2: Date.UTC(2014, 11, 6),
            y: 1
        }, {
            x: Date.UTC(2014, 11, 4),
            x2: Date.UTC(2014, 11, 7),
            y: 1
        }], color: '#BF0B23'
    }]

});

/**
*Highcharts X系列插件
*/
（职能（H）{
var defaultPlotOptions=H.getOptions（）.plotOptions，
columnType=H.seriesTypes.column，
each=H.each，
引伸类=H.引伸类，
pick=H.pick，
点=H点，
系列=H.系列；
defaultPlotOptions.xrange=H.merge（defaultPlotOptions.column{
工具提示：{
点格式：'\u25CF{series.name}:{point.yCategory}
'
}
});
H.seriesTypes.xrange=H.extendClass（柱型、{
点类：引伸类（点{
//将x2和yCategory添加到工具提示格式的可用特性中
getLabelConfig:函数（）{
var cfg=Point.prototype.getLabelConfig.call（this）；
cfg.x2=这个.x2；
cfg.yCategory=this.yCategory=this.series.yAxis.categories&&this.series.yAxis.categories[this.y]；
返回cfg；
}
}),
类型：“xrange”，
是的，
并行阵列：['x'，'x2'，'y']，
要求：错误，
动画：H.seriesTypes.line.prototype.animate，
/**
*借用列系列度量，但使用交换的轴。这提供了自由访问
*添加到诸如分组填充、分组、点宽度等功能。
*/
getColumnMetrics:函数（）{
var度量，
chart=this.chart；
函数交换{
每个（图表、系列、功能）{
var xAxis=s.xAxis；
s、 xAxis=s.yAxis；
s、 yAxis=xAxis；
});
}
swapAxes（）；
this.yAxis.closestPointRange=1；
metrics=columnType.prototype.getColumnMetrics.call（this）；
swapAxes（）；
回报指标；
},
/**
*覆盖cropData以显示x在可见范围之外的点
*但是x2在外面。
*/
cropData：函数（扩展数据、yData、最小值、最大值）{
//用x2Data替换扩展数据以查找适当的cropStart
var crop=Series.prototype.cropData.call（this，this.x2Data，yData，min，max）；
//重新插入裁剪的扩展数据
crop.xData=xData.slice（crop.start、crop.end）；
还田作物；
},
翻译：函数（）{
columnType.prototype.translate.apply（这是参数）；
var系列=此，
xAxis=series.xAxis，
metrics=series.columnMetrics，
minPointLength=series.options.minPointLength | | 0；
H.每个（系列）点、功能（点）{
var plotX=point.plotX，
plotX2=xAxis.toPixels（H.pick（point.x2，point.x+（point.len | 0）），真），
宽度=plotX2-plotX，
宽度差；
if（minPointLength）{
宽度差=宽度dataMax）{
dataMax=val；
modMax=true；
}
});
});
if（modMax）{
axis.dataMax=dataMax；
}
}
});
}（高图）；
//图表
Highcharts.chart（'容器'{
图表：{
类型：“xrange”
},
标题：{
文本：“项目列表”
},
xAxis：{
键入：“日期时间”，
最小值：UTC日期（2014年11月3日）
},
亚克斯：{
标题：“”，
类别：[‘项目1’、‘项目2’]，
对
},
系列：[{
名称：“项目1”，
//点填充：0，
//分组填充：0，
边界半径：5，
点宽度：10，
数据：[{
x:UTC日期（2014年11月3日），
x2:UTC日期（2014年11月4日），
y:0
}, {
x:UTC日期（2014年11月6日），
x2:UTC日期（2014年11月7日），
y:0
},
{
x:UTC日期（2014年11月9日），
x2:UTC日期（2014年11月11日），
y:0
},
{
x:UTC日期（2014年11月3日），
x2:UTC日期（2014年11月6日），
y:1
}, {
x:UTC日期（2014年11月4日），
x2:UTC日期（2014年11月7日），
y:1
}]，颜色：“#BF0B23”
}]
});

演示：

---

我还通过添加“color:”#BF0B23“修改了条的颜色，但是我想以不同的颜色渲染“Item 1”中的3条条条。如果可能的话，您有什么想法吗？

您可以在每个

点上分别对
系列
进行相同的颜色定制。在每个
点设置颜色
覆盖
系列
颜色，就像
系列
颜色覆盖
绘图选项
颜色一样。使用最具体的值

例如，在您的例子（）中：

非常感谢，我想我已经阅读了文档，说明颜色应用于系列级别，但这非常有意义。
data: [{
    x: Date.UTC(2014, 11, 3),
    x2: Date.UTC(2014, 11, 4),
    y: 0,
    color: 'blue'
}]