在高图中更改图形系列填充颜色

Question

如图所示，我想逐点更改填充颜色（在我的情况下是指项目状态）， visual for my chart

到目前为止我使用的代码如下，

    $(function () {
    $('#ao-projectssummry-chart').highcharts({
        type: "spline",
        title: null,
        borderRadius : null,
        xAxis: {
            categories: ['May2016', 'June2016', 'July2016', 'August2016', 'september2016', 'November2016'],
            opposite: true
            //type: 'datetime',
            //min: Date.UTC(2011, 4, 31),
            //max: Date.UTC(2012, 11, 6)
        },
        yAxis: {
            min: 0,
            max: 5,
            title : null
        },
        plotOptions: {
            series: {
                lineWidth: 20,
                borderRadius: null,
                radius: 0
            },
            marker: {
                radius : 0
            }

        },
        credits : {
            enabled : false
        },
        legend: {
            enabled : false
        },

        series: [{
            name: "Project 1",
            data: [1, 1, {
                y: 1,
                            marker: {
                                symbol: 'url(https://www.highcharts.com/samples/graphics/sun.png)',
                                overlapping: true
                            }
                }, {
                    y: 1,
                            marker: {
                                symbol: 'url(https://www.highcharts.com/samples/graphics/sun.png)'
                            }
                }, {
                    y: 1,
                    marker: {
                        symbol: 'url(https://www.highcharts.com/samples/graphics/sun.png)'
                    }
                }
                ]
        },
        {
            name: "Project 2",

            data: [2, {
                y: 2,
                marker: {
                    symbol: 'url(https://www.highcharts.com/samples/graphics/sun.png)',
                    overlapping : true
                }
            }, 2, 2, 2, {
                y:2,
                marker: {
                    symbol: 'url(https://www.highcharts.com/samples/graphics/sun.png)',
                    overlapping: true
                }
            },
            ]
        }]
    });
});

那么，如何逐点更改绘图选项颜色？还有如何实现图片中显示的背景线？

任何帮助将不胜感激！提前致谢。

Answer 1

好的，看来这个问题与我第一次读到的不同。与其改变点标记的颜色，不如改变标记之间的线段颜色。

这是一种实现您所要求的方法，使用columnrange 系列类型而不是行。这样可以提供更大的灵活性和控制力。

想法：

首先，设置类型，反转图表（columnrange 是垂直系列类型；要使其水平，请反转图表 - x 轴现在是垂直轴，y 轴现在是水平轴）：

chart: {
  type: "columnrange",
  inverted: true
}

相应地更新轴设置（将 x 替换为 y）。

使用x 值、low 值（起点）和high 值（终点）设置您的数据。

将颜色设置为您想要的任何颜色：

data: [{
  x: 1,
  low: Date.UTC(2016,3,15),
  high: Date.UTC(2016,4,21),
  color: 'rgb(0,156,255)'
},{
   x: 3,
   low: Date.UTC(2016,2,7),
   high: Date.UTC(2016,6,15),
   color: "rgb(204,0,0)"
 }]

要放置标记，请添加一个单独的系列，线或分散（我使用线，带有lineWidth: 0，因为分散系列使用不同的工具提示模型，并且不容易与其他系列集成，如果工具提示对您很重要。但除此之外，两者的工作方式相同）。

标记系列：

{
  name: 'Markers',
  type: 'line',
  data: [
  {
    x: 1,
    y: Date.UTC(2016,2,15),
    marker: { 
      fillColor:"#9CCB00"
    }
  }

示例：

• https://jsfiddle.net/jlbriggs/x7c3t81n/

输出：

Answer 2

你需要直接在data数组中指定：

示例代码：

data: [5,4,3,2,5,6,7,9, {y:6, marker: { enabled: true, radius: 10, fillColor: 'red'}},3,2,5,6,7]

您可以在 plotOptions 中指定影响数据点的任何内容，您都可以通过这种方式为特定数据点指定。

您没有指定任何内容的任何点，都遵循默认选项或 plotOptions 中指定的选项。

小提琴：

• http://jsfiddle.net/jlbriggs/3d3fuhbb/126/

输出：