Sunburst图在Angular中使用Highcharts不显示不同的颜色。

huangapple
go评论63阅读模式
英文:

Sunburst chart in angular using highcharts not showing different colors

问题

我正在尝试在Angular中使用Highcharts显示旭日图。图表正在显示，但问题出在颜色上。我已经提到了一个颜色数组，但图表只显示数组中的第一个颜色。有人可以帮助我找出问题在哪吗？

以下是我的代码：

this.chart = Highcharts.chart('container', {

      chart: {
        type: 'sunburst',
        height: '100%'
      },
      colors: ['#2f7ed8', '#0d233a', '#8bbc21', '#910000', '#1aadce',
        '#492970', '#f28f43', '#77a1e5', '#c42525', '#a6c96a'], 
      title: {
          text: 'PSec GEARS Function Usage'
      },
      subtitle: {
          text: 'Top 10 Functions used as % per User for the last Month'
      },
      credits: {
          enabled: false
      },
      tooltip: {
        headerFormat: '',
        pointFormat: 'The population of <b>{point.name}</b> is <b>{point.value}</b>'
      }, 

      series: [{
        type: "sunburst",
        data: this.dataValues,
        cursor: 'pointer',
        dataLabels: {
            format: '{point.name}',
            filter: {
                property: 'innerArcLength',
                operator: '>',
                value: 16
            },
            rotationMode: 'circular'
        },
        
        levels: [{
          level: 1,
          dataLabels: {
            filter: {
              property: 'outerArcLength',
              operator: '>',
              value: 64
            }
          }
        }, {
          level: 2,
          colorByPoint: true
        },
        {
          level: 3,
          colorVariation: {
            key: 'brightness',
            to: -0.5
          }
        }, {
          level: 4,
          colorVariation: {
            key: 'brightness',
            to: 0.5
          }
        }]
      }]
    });

这是我得到的输出图表的图像： Sunburst图在Angular中使用Highcharts不显示不同的颜色。

英文:

I'm trying to display a sunburst chart using Highcharts in Angular. The chart is displaying, but the problem is with the colors. I've mentioned an array of colors, but the chart only shows the very first color from the array. Can someone please help me what I'm doing wrong here?

Below is my code:

this.chart = Highcharts.chart(&#39;container&#39;, {
chart: {
type: &#39;sunburst&#39;,
height: &#39;100%&#39;
},
colors: [&#39;#2f7ed8&#39;, &#39;#0d233a&#39;, &#39;#8bbc21&#39;, &#39;#910000&#39;, &#39;#1aadce&#39;,
&#39;#492970&#39;, &#39;#f28f43&#39;, &#39;#77a1e5&#39;, &#39;#c42525&#39;, &#39;#a6c96a&#39;], 
title: {
text: &#39;PSec GEARS Function Usage&#39;
},
subtitle: {
text: &#39;Top 10 Functions used as % per User for the last Month&#39;
},
credits: {
enabled: false
},
tooltip: {
headerFormat: &#39;&#39;,
pointFormat: &#39;The population of &lt;b&gt;{point.name}&lt;/b&gt; is &lt;b&gt;{point.value}&lt;/b&gt;&#39;
}, 
series: [{
type: &quot;sunburst&quot;,
data: this.dataValues,
cursor: &#39;pointer&#39;,
dataLabels: {
format: &#39;{point.name}&#39;,
filter: {
property: &#39;innerArcLength&#39;,
operator: &#39;&gt;&#39;,
value: 16
},
rotationMode: &#39;circular&#39;
},
levels: [{
level: 1,
dataLabels: {
filter: {
property: &#39;outerArcLength&#39;,
operator: &#39;&gt;&#39;,
value: 64
}
}
}, {
level: 2,
colorByPoint: true
},
{
level: 3,
colorVariation: {
key: &#39;brightness&#39;,
to: -0.5
}
}, {
level: 4,
colorVariation: {
key: &#39;brightness&#39;,
to: 0.5
}
}]
}]
});

This is an image of the output chart I get:
Sunburst图在Angular中使用Highcharts不显示不同的颜色。

答案1

得分: 1

你没有在你发送的代码中包含数据，所以很难说你到底做错了什么，但太阳图表中的数据结构应该如下所示：

Highcharts.chart('container', {
    chart: {
        type: 'sunburst'
    },
    colors: ['#2f7ed8', '#0d233a', '#8bbc21', '#910000', '#1aadce',
        '#492970', '#f28f43', '#77a1e5', '#c42525', '#a6c96a'],
    series: [{
        type: "sunburst",
        data: [
            {
                id: '0.0',
                parent: '',
                name: 'Main'
            }, {
                id: '1.1',
                parent: '0.0',
                name: 'A'
            }, {
                id: '1.2',
                parent: '0.0',
                name: 'B'
            },
            {
                id: '1.3',
                parent: '0.0',
                name: 'C'
            },
            {
                id: '2.1',
                parent: '1.1',
                name: 'A1',
                value: 10
            }, {
                id: '2.2',
                parent: '1.1',
                name: 'A2',
                value: 5
            },
            {
                id: '2.3',
                parent: '1.2',
                name: 'B1',
                value: 12
            },
            {
                id: '2.4',
                parent: '1.2',
                name: 'B2',
                value: 8
            },
            {
                id: '2.5',
                parent: '1.3',
                name: 'C1',
                value: 15
            },
            {
                id: '2.6',
                parent: '1.3',
                name: 'C2',
                value: 7
            },
            {
                id: '2.7',
                parent: '1.3',
                name: 'C3',
                value: 11
            },
        ],
        levels: [{
            level: 1,
            dataLabels: {
                filter: {
                    property: 'outerArcLength',
                    operator: '>',
                    value: 64
                }
            }
        }, {
            level: 2,
            colorByPoint: true
        },
        {
            level: 3,
            colorVariation: {
                key: 'brightness',
                to: -0.5
            }
        }, {
            level: 4,
            colorVariation: {
                key: 'brightness',
                to: 0.5
            }
        }]
    }]
});

官方演示：https://www.highcharts.com/demo/sunburst
API文档：https://api.highcharts.com/highcharts/series.sunburst.data

英文:

You didn't include the data in the code you sent, so it's hard to say what exactly you're doing wrong, but the data structure in the sunburst chart should look like this:

<!-- begin snippet: js hide: false babel: false -->

<!-- language: lang-js -->

Highcharts.chart(&#39;container&#39;, {
chart: {
type: &#39;sunburst&#39;
},
colors: [&#39;#2f7ed8&#39;, &#39;#0d233a&#39;, &#39;#8bbc21&#39;, &#39;#910000&#39;, &#39;#1aadce&#39;,
&#39;#492970&#39;, &#39;#f28f43&#39;, &#39;#77a1e5&#39;, &#39;#c42525&#39;, &#39;#a6c96a&#39;], 
series: [{
type: &quot;sunburst&quot;,
data: [
{
id: &#39;0.0&#39;,
parent: &#39;&#39;,
name: &#39;Main&#39;
}, {
id: &#39;1.1&#39;,
parent: &#39;0.0&#39;,
name: &#39;A&#39;
}, {
id: &#39;1.2&#39;,
parent: &#39;0.0&#39;,
name: &#39;B&#39;
},
{
id: &#39;1.3&#39;,
parent: &#39;0.0&#39;,
name: &#39;C&#39;
},
{
id: &#39;2.1&#39;,
parent: &#39;1.1&#39;,
name: &#39;A1&#39;,
value: 10
}, {
id: &#39;2.2&#39;,
parent: &#39;1.1&#39;,
name: &#39;A2&#39;,
value: 5
},
{
id: &#39;2.3&#39;,
parent: &#39;1.2&#39;,
name: &#39;B1&#39;,
value: 12
},
{
id: &#39;2.4&#39;,
parent: &#39;1.2&#39;,
name: &#39;B2&#39;,
value: 8
},
{
id: &#39;2.5&#39;,
parent: &#39;1.3&#39;,
name: &#39;C1&#39;,
value: 15
},
{
id: &#39;2.5&#39;,
parent: &#39;1.3&#39;,
name: &#39;C2&#39;,
value: 7
},
{
id: &#39;2.5&#39;,
parent: &#39;1.3&#39;,
name: &#39;C3&#39;,
value: 11
},
],
levels: [{
level: 1,
dataLabels: {
filter: {
property: &#39;outerArcLength&#39;,
operator: &#39;&gt;&#39;,
value: 64
}
}
}, {
level: 2,
colorByPoint: true
},
{
level: 3,
colorVariation: {
key: &#39;brightness&#39;,
to: -0.5
}
}, {
level: 4,
colorVariation: {
key: &#39;brightness&#39;,
to: 0.5
}
}]
}]
});

<!-- language: lang-html -->

&lt;script src=&quot;https://code.highcharts.com/highcharts.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;https://code.highcharts.com/modules/sunburst.js&quot;&gt;&lt;/script&gt;
&lt;div id=&quot;container&quot;&gt;&lt;/div&gt;

<!-- end snippet -->

Official demo: https://www.highcharts.com/demo/sunburst <br/>
API: https://api.highcharts.com/highcharts/series.sunburst.data

huangapple
  • 本文由 发表于 2023年3月12日 14:49:25
  • 转载请务必保留本文链接：https://go.coder-hub.com/75711494.html
  • highcharts
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定