Question

我正在尝试建立像这样的图表：

但是主要的工作是添加两个相互补充的不同序列。

我真的很感谢别人能给我的帮助。

非常感谢。

Answer 1

您可以实现，但是实现过程并不那么容易。我准备了显示该操作方法的示例，并将尝试逐步解释我的操作。

首先，您需要像这样定义数据数组：

apiVersion: securityenforcement.admission.cloud.ibm.com/v1beta1
kind: ImagePolicy
metadata:
  name: image-policy
spec:
  repositories:
  - name: "docker.io/store/ibmcorp/*"
    policy: null

然后定义图表配置，并在var data = [40, 30, 10, 20]函数处理程序内部放入创建所需效果的全部逻辑。

下一步是在所有chart.events.load位置上进行迭代，并根据如下所示的计算来创建自己的特定点，系列，yAxis和窗格：

data

最后，通过新对象更新图表：

  load() {
    var chart = this,
      series = [],
      panes = [],
      yAxes = [],
      radius = 112,
      innerRadius = 88,
      pointAngle,
      prevPointAngle = 0,
      pointPadding = (radius - innerRadius) / 4,
      colors = Highcharts.getOptions().colors,
      additionalPointPadding = 2;

    data.forEach(function(p, i) {
      pointAngle = (p * 360) / 100 // Calculate point angle

      // Prepare pane for each point
      panes.push({
        startAngle: prevPointAngle + pointPadding + additionalPointPadding,
        endAngle: (pointAngle + prevPointAngle) - pointPadding - additionalPointPadding,
        background: [{
          backgroundColor: '#fff',
          borderWidth: 0
        }]
      })
      // Prepare yAxis for specific pane
      yAxes.push({
        min: 0,
        max: 100,
        lineWidth: 0,
        tickPositions: [],
        pane: i
      })
      // Prepare series with specific point
      series.push({
        name: 'Exercise ' + i,
        data: [{
            color: colors[i],
          radius: radius + '%',
          innerRadius: innerRadius + '%',
          y: 100,
          percents: p
        }],
        yAxis: i
      })
      prevPointAngle += pointAngle
    })

最后，您需要了解的是，您的图表配置应在chart.update({ pane: panes, yAxis: yAxes, series: series },true, true)数组中具有相同数量的空对象，例如数据位置，例如：

pane

下面是显示最终效果的示例：https://jsfiddle.net/yamu5z9r/

亲切的问候！

尝试使用HighCharts构建具有多层的SolidGauge图表

1 个答案: