Question

请你看看This Demo，让我知道为什么情节药水颜色没有从颜色选项（两种颜色）获得条形颜色。正如你所看到的，两种颜色的颜色只有一种颜色。

$(function () {
    chart1 = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
          type: 'bar'
        },
        plotOptions: {
            column: {
                colorByPoint: true
            },
              series: {
                pointWidth: 50
            }
        },
        colors: [
            '#D9844B',
            '#3F4539'],
        credits: {
            enabled: false
        },
        title: {
            text: 'Test',
            style: {
                color: '#2d2d2d',
                fontWeight: 'normal',
                fontSize: '11',
                marginBottom: '30'
            }
        },

        xAxis: {
            categories: ['Ecology & Economics', 'Economics Only'],

        },
        yAxis: {
            tickInterval: 50,
            max: 300,
            title: {
                text: 'Number of ROR Facilities'
            }
        },
        legend: {
            enabled: false
        },
        tooltip: {
            formatter: function () {
                return this.x + '  <b> : ' + this.y + '</b>';
            }
        },
        series: [{
            data: [29.9, 71.5],
            dataLabels: {
                enabled: true,

                color: '#2d2d2d',
                align: 'right',
                x: -40,
                y: 0,
                style: {
                    fontSize: '12px',
                    fontFamily: 'Verdana, sans-serif'
                }
            }
        }]
    });
});

由于

Answer 1

我认为文档错了。它说colorByPoint是一个条形/列选项，但你是正确的它不起作用。将它移动到一个系列选项，它确实有效：

    plotOptions: {            
          series: {
            pointWidth: 50,
            colorByPoint: true
        }
    },

更新了fiddle。

Answer 2

参考@Mark答案，Highcharts文档是正确的。

在Highcharts的每个系列中定义选项之间存在差异，尤其是 bar 和 column 系列是不同的系列。

您使用的是 bar 系列（图表类型：“ bar”），但是在plotOptions中，您仅为列系列定义了colorByPoint，而显然并没有甚至存在于您的图表中。

您有许多解决方案：

1）您可以在特定系列选项内定义colorByPoint：

  chart: {
    type: 'bar'
  },

  series: [{
    colorByPoint: true,
    data: [4, 3, 5]
  }]

2）您可以为所有系列定义colorByPoint：

chart: {
    type: 'bar'
  },

  plotOptions: {
    series: {
        colorByPoint: true
    }
  },

  series: [{
    data: [4, 3, 5]
  }]

3）您可以为所有条形类型系列定义colorByPoint：

chart: {
    type: 'bar'
  },

  plotOptions: {
    bar: {
        colorByPoint: true
    }
  },

  series: [{
    data: [4, 3, 5]
  }]

4）您可以使用倒立柱型系列（实际上是条形系列）：

chart: {
    type: 'column',
    inverted: true
  },

  plotOptions: {
    column: {
      colorByPoint: true
    }
  },

  series: [{
    data: [4, 3, 5]
  }]

5）您还可以分别为每个条定义颜色：

series: [{
    type: 'bar',
    data: [{
      y: 4,
      color: 'red'
    }, {
      y: 3,
      color: 'blue'
    }, {
      y: 5,
      color: 'green'
    }]
  }]

甚至更多。以上解决方案对您来说应该足够了。请记住，plotOptions.column不适用于chart.type：“ bar”。

在Highchart条形图上设置颜色选项的问题

2 个答案: