在highcharts中更改图表系列Fillcolor [英] Change Graph Series Fillcolor in highcharts

问题描述

如图所示，我想更改填充颜色点（在我的情况下引用项目状态），
p>

AS shown in image, i want to change Fill color by point (referring project state in my case so), visual for my chart

code i have used so far to achieve this is below,

    $(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
                }
            },
            ]
        }]
    });
});

so, how can i change the plotoption color by point? also how can i achieve background lines shown in the picture?

Any help would be appreciated! thanks in advance.

解决方案

Ok, so it seems the question is different than what I read it as the first time. Rather than changing the color of the point markers, you want to change the color of the segments between markers.

Here is an approach that achieves what you are asking for, using the columnrange series type instead of a line. This allows more flexibility and control.

The idea:

First, set the type, and invert the chart (columnrange is a vertical series type; to make it horizontal, invert the chart - the x axis is now the vertical axis, and the y axis is now the horizontal axis):

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

Update the axis settings accordingly (swap x for y).

Set your data with an x value, a low value (starting point), and a high value (end point).

Set the color to whatever you want:

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)"
 }]

To place the markers, add a separate series, either line or scatter (I use line, with a lineWidth: 0, because scatter series use a different tooltip model, and are not as easy to integrate with other series, if the tooltip is important to you. But otherwise, both work the same).

Marker series:

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

Example:

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

Output:

这篇关于在highcharts中更改图表系列Fillcolor的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！