Highcharts设置背景颜色和不透明度

Highcharts set background color and opacity

本文关键字:不透明度 颜色 背景 设置 Highcharts      更新时间:2023-09-26

对于类型为area的图表,有没有办法在高图中设置背景颜色和不透明度?

根据文档,您必须通过将颜色指定为rgb值,然后添加不透明度值来设置不透明度。然而,当我这样做时,我会得到图表的填充颜色为黑色。下面是我的代码

<script type="text/javascript">
$(function() {
 var javascriptArray = <?php echo json_encode($array);?>;
 var newjavascriptArray = <?php echo json_encode($uniqueDates);?>;
 var valueArray = <?php echo json_encode($total); ?>;
 var js_array2 = [5, 10, 15];
  $('#container').highcharts({
  credits : {
  enabled: false
},
exporting:
{
  enabled: false
},
  chart: {
      backgroundColor: '#10416A',
      type: "area"
  },
  title: {
    style : {
      color: "white"
    },
      text: "Progress"
  },
  subtitle: {
    style : {
      color: "white"
    },
      text: 'Village Print & Media'
  },
  xAxis: {
  // gridLineWidth: 0,
  // lineWidth: 0,
  // minorGridLineWidth: 0,
    title:{
      style: {
        color : "white"
      },
        margin: 50,
        text: "February"
    },
    labels: {
    style : {
      color: "white"
    },
  },
    categories: newjavascriptArray
  },
  yAxis: {
    allowDecimals: false,
      title: {
        style: {
          color : "white"
        },
          text: "Points"
      },
      labels : {
        style: {
            color: "white"
        },
      },
  },
      plotOptions: {
        series: {
        color: "#00A6CE",
        lineColor: "#00A6CE",
        fillColor: 'rgb(0, 166, 206, 0.4)',
        // fillOpacity: 0.8,
        marker : {
          fillColor: "#00A6CE"
        },
         },
      line: {
          dataLabels: {
              enabled: false
          },
          enableMouseTracking: true
      }

  },
  legend: {
      layout: 'vertical',
      align: 'right',
      verticalAlign: 'middle',
      borderWidth: 2,
      color: "white"
  },
  series: [{
      name: 'Points Ray',
      color: "white",
      dataLabels: {
        color:"white"
      },
      data: valueArray
  }]
 });
});

http://api.highcharts.com/highcharts#plotOptions.area.fillOpacity

请注意,设置显式fillColor时,不会应用fillOpacity。

因此不能使用fillOpacity属性。

我试过你的代码fillColor: 'rgb(0, 166, 206, 0.4)'不支持不透明度,但与fillColor: 'rgba(0, 166, 206, 0.4)'

希望得到帮助。