在单个 highcharts 中组合线性和圆形进度条

khbbv19g  于 2023-03-23  发布在  Highcharts
关注(0)|答案(1)|浏览(179)

我正在使用Angular 为10的highchart图形。下面是显示不同颜色和值的2个圆形进度条的图表。

new Highcharts.chart('container', {
        exporting: {
          enabled: false
        },
        chart: {
          type: 'solidgauge',
          events: {
            render() {
              let chart = this,
                label1 = chart.series[0].dataLabelsGroup,
                label2 = chart.series[1].dataLabelsGroup;

              label1.translate(chart.marginRight, 0)
              label2.translate(chart.marginRight, chart.plotTop - label2.getBBox().height)
            }
          }
        },
        legend: {
          enabled: false // disable the legend
        },
        credits: {
          enabled: false
        },
        pane: {
          startAngle: 180,
          background: this.getBackgroundSettingsForDepositStatusGraph()
        },
        tooltip: {
          outside: true
        },
        title: false,
        accessibility: {
          point: {
            valueSuffix: ''
          }
        },
        xAxis: {
          tickInterval: 1,
          minorGridLineWidth: 0,
          labels: {
            align: 'right',
            useHTML: true,
            allowOverlap: true,
            step: 1,
            y: 3,
            style: {
              fontSize: '13px',
              color: "black"
            }
          },
          lineWidth: 0,
        },
        yAxis: {
          min: 0,
          max: 100,
          lineWidth: 0,
          tickPositions: []
        },
        plotOptions: {
          solidgauge: {
            dataLabels: {
              enabled: true,
              verticalAlign: 'middle'
            },
          }
        },
        series: [
          {
            name: "Total",
            showInLegend: true,
            data: [
              {
                color: Highcharts.getOptions().colors[0],
                radius: "115%",
                innerRadius: "110%",
                y: Math.round(this.data.total.percentage),
                dataLabels: {
                  format: "{y}%",
                  borderWidth: 0,
                  style: {
                    fontSize: "15px"
                  }
                }
              }
            ]
          },
          {
            name: 'Amount',
            showInLegend: true,
            data: [
              {
                color: Highcharts.getOptions().colors[2],
                radius: "105%",
                innerRadius: "100%",
                y: Math.round(this.data.amount.percentage),
                dataLabels: {
                  format: "{y}%",
                  borderWidth: 0,
                  style: {
                    fontSize: "15px"
                  }
                }
              }
            ]
          }
        ]

      });

与此沿着,我需要在此图表下添加2个线性进度条,具有相同的值和一些额外的数据。
例如:
总计25 60(线性进度条与this.data.total.percentage)
金额45 100(线性进度条与this.data.amount.percentage)
注意:线性条应该显示在圆形进度条下面,也应该以示例中给出的格式显示。
我尝试了很多方法,但线性酒吧重叠圆形之一。

omvjsjqw

omvjsjqw1#

正如@FunkMonkey33所说,你可以为每个图表使用不同的div。如果你想避免为单独的图表重复相同的选项,你可以通过Highcharts.setOptions()全局设置它们
示例代码:

Highcharts.setOptions({
  chart: {
    type: 'area',
  },

  plotOptions: {
    area: {
      color: '#234E38'
    }
  },
});

var chart1 = Highcharts.chart('container1', {
  series: [{
    data: [1, 2, 3, 4]
  }]
});

var chart2 = Highcharts.chart('container2', {
  series: [{
    data: [4, 3, 2, 1]
  }]
});

简化演示:https://jsfiddle.net/BlackLabel/vr2d31f4/
演示:https://jsfiddle.net/BlackLabel/jsmqacfu/

文件:https://www.highcharts.com/docs/getting-started/how-to-set-options#global-options
API参考:https://api.highcharts.com/class-reference/Highcharts.html#.setOptions

相关问题