highcharts 如何使用Android Package 器扩展highchart绘图带外部图形

raogr8fs  于 2022-11-10  发布在  Highcharts
关注(0)|答案(1)|浏览(161)

我有一个要求,以延长我的情节带以外的图形,并给予一个形状。需要实现的部分标记在所附的截图。使用highchart android Package 器。而搜索的解决方案,我发现jsfidle我想做同样的事情使用android Package 器;我正在使用版本为6.1.4的highchart库
targetimage

Link : https://jsfiddle.net/BlackLabel/e52smy16/
    <script src="https://code.highcharts.com/highcharts.js"></script>

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

    const renderCustomPlotBand = function(chart) {
  let ren = chart.renderer,
    customOptions = chart.yAxis[0].options.customPlotBand,
    from = customOptions.from,
    to = customOptions.to,
    xEnd = chart.plotLeft + chart.plotSizeX,
    xBeginig = chart.plotLeft - 40,
    point1 = [xEnd, chart.yAxis[0].toPixels(from)],
    point2 = [xBeginig, chart.yAxis[0].toPixels(from)],
    point3 = [xBeginig, chart.yAxis[0].toPixels(to)],
    point4 = [xEnd, chart.yAxis[0].toPixels(to)],
    textWidth = chart;

  if (customOptions.enabled) {
    chart.customPlotBand = ren.g('customPlotBand').add().toFront()
    chart.customText = ren.g('customText').add().toFront();

    ren.path(['M', point1[0], point1[2], 'L', point2[0], point2[2], point3[0], point3[2], point4[0], point4[2]])
      .attr({
        'stroke-width': 1,
        stroke: 'red'
      }).add(chart.customPlotBand);

    ren.label(customOptions.text, point2[0] - 10, point2[2] - 17).attr({
      padding: 5,
      fill: 'white',
      rotation: -90
    }).add(chart.customText);

    chart.customText.translate(0, -(point2[2] - point3[2]) / 2 + chart.customText.element.getBBox().height - 3)
  }
}

Highcharts.chart('container', {
  chart: {
    marginLeft: 80,
    events: {
      render() {
        renderCustomPlotBand(this)
      }
    }
  },

  yAxis: [{
    //Declere your custom plotband
    customPlotBand: {
      enabled: true,
      from: 2,
      to: 4,
      text: 'Target'
    },
    title: {
      text: null
    },
    lineWidth: 1,
    gridLineWidth: 1
  }],
  series: [{
    data: [1, 3, 6, 2, 5]
  }]
});```
xytpbqjk

xytpbqjk1#

遗憾的是,由于渲染器模块在Android Package 器中不可用,因此无法像所提供的示例那样创建自定义plotBand。
实现类似行为的唯一方法是使用静态plotBand。

HIYAxis hiyAxis = new HIYAxis();

    HIPlotBands plotBands = new HIPlotBands();
    plotBands.setColor(HIColor.initWithName("red"));
    plotBands.setFrom(2);
    plotBands.setTo(4);

    hiyAxis.setPlotBands(new ArrayList<>(Collections.singletonList(plotBands)));

    options.setYAxis(new ArrayList<>(Collections.singletonList(hiyAxis)));

相关问题