Highcharts.setOption()中的Highcharts plotBands和plotLines默认选项

qfe3c7zg 于 2023-08-05 发布在 Highcharts

关注(0)|答案(1)|浏览(149)

我创建了一个简单的主题，并在很多地方更改了字体（大小，系列，颜色），但无法找到使用Highcharts.SetOptions()更改plotband标签字体的方法。有没有一种方法可以把情节带设计成这样？
下面是我目前使用的代码。

Highcharts.setOptions({
  colors: ['red',
    '#434348',
    '#90ed7d',
    '#f7a35c',
    '#8085e9',
    '#f15c80',
    '#e4d354',
    '#8085e8',
    '#8d4653',
    '#91e8e1'
  ],
  chart: {
    backgroundColor: '#FFF',
    reflow: true,
  },
  title: {
    style: {
      color: '#333',
      font: '18px "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, sans-serif'
    }
  },
  subtitle: {
    style: {
      color: '#666666',
      font: 'bold 12px "Trebuchet MS", Verdana, sans-serif'
    }
  },
  legend: {
    itemStyle: {
      font: 'bold 12px "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, sans-serif',
      color: '#333',
    },
    itemHoverStyle: {
      color: 'gray'
    },
    symbolRadius: 0
  },
  tooltip: {
    style: {
      font: '12px  "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, sans-serif',
      fontSize: '12px'
    }
  },
  xAxis: {
    labels: {
      style: {
        color: '#606060',
        font: '11px "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, sans-serif'
      },
      distance: 8
    },
  },
  yAxis: {
   labels: {
      style: {
        color: '#606060',
        font: '11px "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, sans-serif'
      }
    },
    title: {
      style: {
        color: '#606060',
        font: '12px  "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, sans-serif'
      }
    }
  },
  plotOptions: {
    series: {
      dataLabels: {
        style: {
          fontWeight: 'bold',
          fontSize: '12px'
        }
      }
    }
  },
});


Highcharts.chart('container', {
  xAxis: {
    plotBands: [{ // mark the weekend
      color: '#FCFFC5',
      from: Date.UTC(2010, 0, 2),
      to: Date.UTC(2010, 0, 4),
      label: {
        text: 'Plot band',

      }
    }],
    tickInterval: 24 * 3600 * 1000, // one day
    type: 'datetime'
  },

  series: [{
    data: [29.9, 71.5, 56.4, 69.2, 144.0, 176.0, 135.6, 148.5, 216.4],
    pointStart: Date.UTC(2010, 0, 1),
    pointInterval: 24 * 3600 * 1000
  }]
});

#container {
  height: 400px;
}

<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container"></div>

希望有人能告诉我如何解决这个问题。这将是一个耻辱，如果一个必须添加到每一个plotband为每一个图表。

highcharts

来源：https://stackoverflow.com/questions/76580715/highcharts-plotbands-and-plotlines-default-options-in-highcharts-setoption

1条答案

按热度按时间

oxiaedzo1#

不幸的是，默认情况下，不可能为plotLines和plotBands设置默认值，但我设法制作了一个简单的函数，在加载基于Highcharts.setOptions()中的自定义属性的图表时为它们添加默认设置;

Highcharts.addEvent(Highcharts.Chart, 'load', function() {
  const chart = this;

  function setDefaultOptions(axis) {
    const plotBandsOptions = [],
      plotLinesOptions = [];

    axis.plotLinesAndBands.forEach(function(plot) {
      if (plot.options.from) {
        plotBandsOptions.push(
          Highcharts.merge(chart.options.plotBands, plot.options)
        )
      } else {
        plotLinesOptions.push(
          Highcharts.merge(chart.options.plotLines, plot.options)
        )
      }
    })

    axis.update({
      plotBands: plotBandsOptions,
      plotLines: plotLinesOptions
    }, false);
  }

  chart.xAxis.forEach(function(axis) {
    setDefaultOptions(axis)
  });
  chart.yAxis.forEach(function(axis) {
    setDefaultOptions(axis)
  });
  chart.redraw();
});

Highcharts.setOptions({
  plotBands: {
    color: 'red',
    label: {
      text: 'Test'
    }
  },
  plotLines: {
    color: 'red',
    label: {
      text: 'Test'
    }
  },
});

字符串

Demo：https://jsfiddle.net/BlackLabel/sjd048b9/

赞(0）回复(0）举报 2023-08-05

我来回答

Highcharts.setOption()中的Highcharts plotBands和plotLines默认选项

1条答案

相关问题

热门标签

最新问答