高清固体量规堆叠值

发布于 2025-01-29 05:23:52 字数 1608 浏览 4 评论 0原文

我有一个不错的仪表，显示出类似的百分比值：

选项是：

{
  title: false,
  legend: false,
  chart: {
    type: 'solidgauge',
    width: 150,
    height: 150,
  },
  pane: {
    size: '100%',
    startAngle: 0,
    background: {
      backgroundColor: '#eee',
      outerRadius: '100%',
      innerRadius: '60%',
      borderWidth: 0,
      shape: 'arc',
    },
  },
  tooltip: {
    enabled: false
  },
  credits: {
    enabled: false
  },
  yAxis: {
    min: 0,
    max: 100,
    lineWidth: 0,
    minorTickInterval: null,
    tickPixelInterval: 400,
    tickWidth: 0,
    title: {
      enabled: false,
    },
    labels: {
        enabled:false
    }
  },

  plotOptions: {
    solidgauge: {
      dataLabels: {
        y: -15,
        borderWidth: 0,
        format: '{y}%',
        style: {
          fontSize: '1rem',
          fontWeight: 'normal',
        }
      },
    }
  },
  series: [{
    data: [{
      y: 75,
      color: cyan,
    }]
  }]
}

但是现在我需要两个值：

我期望添加一些堆叠在某个地方的选项以及类似的东西：

  series: [{
    data: [{
      y: 10,
      color: blue,
    }, {
      y: 65,
      color: cyan,
    }]
  }]

但是它不起作用。而且我也没有通过Internet找到此用例的任何示例。 :(

我该如何实现？

原文

I have a nice gauge that displays a percentage value like so:

The options are:

{
  title: false,
  legend: false,
  chart: {
    type: 'solidgauge',
    width: 150,
    height: 150,
  },
  pane: {
    size: '100%',
    startAngle: 0,
    background: {
      backgroundColor: '#eee',
      outerRadius: '100%',
      innerRadius: '60%',
      borderWidth: 0,
      shape: 'arc',
    },
  },
  tooltip: {
    enabled: false
  },
  credits: {
    enabled: false
  },
  yAxis: {
    min: 0,
    max: 100,
    lineWidth: 0,
    minorTickInterval: null,
    tickPixelInterval: 400,
    tickWidth: 0,
    title: {
      enabled: false,
    },
    labels: {
        enabled:false
    }
  },

  plotOptions: {
    solidgauge: {
      dataLabels: {
        y: -15,
        borderWidth: 0,
        format: '{y}%',
        style: {
          fontSize: '1rem',
          fontWeight: 'normal',
        }
      },
    }
  },
  series: [{
    data: [{
      y: 75,
      color: cyan,
    }]
  }]
}

But now I need two values:

I'd have expected to add some stacking option somewhere, along with something like:

  series: [{
    data: [{
      y: 10,
      color: blue,
    }, {
      y: 65,
      color: cyan,
    }]
  }]

but it doesn't work. And I haven't found any example for this use-case over the internet either. :(

How can I achieve this?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

ペ泪落弦音 2025-02-05 05:23:52

soliidgague没有堆叠选项。您需要自己计算预期值，以从提供的图像中实现效果：

  series: [{
    data: [{
      y: 75,
      color: 'cyan',
    },
        {
      y: 15,
      color: 'blue',
    }]
  }]

演示：

There is no stacking option for soliidgague. You need to count expected values by yourself to achieve the effect from provided image:

  series: [{
    data: [{
      y: 75,
      color: 'cyan',
    },
        {
      y: 15,
      color: 'blue',
    }]
  }]

Demo:
https://jsfiddle.net/BlackLabel/4zq6ehfj/

回复收藏 0 原文

厌倦 2025-02-05 05:23:52

正如@magdalena所说，不幸的是，在solidgauge图表中没有选项:(

我成功地通过应用以下转换来伪造这一点：

const absoluteValues = [{
  y: 75,
  color: 'cyan',
},
    {
  y: 15,
  color: 'blue',
}];

const options = {
  series: [{
    name: 'My serie',
    data: [].concat(absoluteValues).reduce((acc, val) => {
      return [...acc, {
        ...val,
        y: acc.reduce((result, {y}) => result + y, val.y),
      }]
    }, []).reverse()
  }],
};

As @magdalena said, unfortunately there is no stacking option in a solidgauge chart :(

I succeeded to fake this by applying the following transformation:

const absoluteValues = [{
  y: 75,
  color: 'cyan',
},
    {
  y: 15,
  color: 'blue',
}];

const options = {
  series: [{
    name: 'My serie',
    data: [].concat(absoluteValues).reduce((acc, val) => {
      return [...acc, {
        ...val,
        y: acc.reduce((result, {y}) => result + y, val.y),
      }]
    }, []).reverse()
  }],
};

回复收藏 0 原文

酒中人 2025-02-05 05:23:52

  series: [
{
  name: 'Operating Systems',
  data: [{ y: 10, color: white, }]
  size: '60%'
},
{
  name: 'Browsers',
  data: [{ y: 10, color: blue, }],
  size: '80%',

}, {
  name: 'Versions',
  data: [{ y: 65, color: cyan, }],
  size: '100%',
  
}]

  series: [
{
  name: 'Operating Systems',
  data: [{ y: 10, color: white, }]
  size: '60%'
},
{
  name: 'Browsers',
  data: [{ y: 10, color: blue, }],
  size: '80%',

}, {
  name: 'Versions',
  data: [{ y: 65, color: cyan, }],
  size: '100%',
  
}]

回复收藏 0 原文

~没有更多了~