我们如何自定义系列数据对象属性名称"name"? & "y"作为highcharts-angle的一部分? [英] How can we customise the series data object property names "name" & "y" as part of highcharts-angular?
问题描述
如果有任何人可以自定义系列数据对象属性名称作为highcharts的一部分，请有人帮我，实际属性名称为 name & y .
Can anyone please help me on if there is anyway to customize the series data object property names as part of highcharts, actual proprty names are name & y.
当我尝试将这些属性名称更改为供应商时， 评分，则饼图未加载到浏览器中
And when I am trying to change these property names as vendor & rating then piechart is not loading in browser
我经历了很多线程，但无法根据需要找到解决方案，因此，请问是否有任何代码更改来更新这些属性名称的帮助，因为我从上述REST API服务中获取了这种数据格式具有不同的值.谢谢.
I gone through many threads but not able to find solution as per my need.So, please help if there is anyway to update these property names with any code changes as I am getting such data format from rest api service as shown above with different values.Thanks in advance.
app.component.ts
import {Component} from '@angular/core';
import * as Highcharts from 'highcharts';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
constructor(){
};
setStarFlag(id:number){
console.log(id);
}
Highcharts = Highcharts;
chartOptions = {
chart: {
type: 'pie',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: 'Vendor Ratings'
},
tooltip: {
pointFormat: '{series.name}:<b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
style: {
//color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
},
showInLegend: true
},
series: {
cursor: 'pointer',
point: {
events: {
click: function(e){
const p = e.point;
this.setStarFlag(p.name);
}.bind(this)
}
}
}
},
credits: {
enabled: false
},
series: [{
name:'Rating',
data: [
{
name: 'Chrome',
y: 61.41
},
{
name: 'Internet Explorer',
y: 11.84
},
{
name: 'Firefox',
y: 10.85
},
{
name: 'Edge',
y: 4.67
},
{
name: 'Safari',
y: 4.18
},
{
name: 'Sogou Explorer',
y: 1.64
},
{
name: 'Opera',
y: 1.6
},
{
name: 'QQ',
y: 1.2
},
{
name: 'Other',
y: 2.61
}
]
}]
};
}
并在app.component.ts文件中看到data对象集硬编码数据，但在我的情况下，对象数据将来自剩余api服务，且格式为
And see in app.component.ts file data object set hard coded data but in my case that object data will come from rest api service in this format
[
{
vendor: 'Chrome',
rating: 61.41
},
{
vendor: 'Internet Explorer',
rating: 11.84
},
{
vendor: 'Firefox',
rating: 10.85
},
{
vendor: 'Edge',
rating: 4.67
},
{
vendor: 'Safari',
rating: 4.18
},
{
vendor: 'Sogou Explorer',
rating: 1.64
},
{
vendor: 'Opera',
rating: 1.6
},
{
vendor: 'QQ',
rating: 1.2
},
{
vendor: 'Other',
rating: 2.61
}
]
因此，在这里，我只想将该REST API响应分配给该highcharts数据对象，但在这种情况下，piechart无法显示.而且由于我无法控制更新这些json对象的属性名称，因为该响应来自api服务.现在，我如何对HighCharts说使用 vendor & 评级安装了名称和 y 显示饼图?
So, here I just want assign that rest api response to that highcharts data object but in that case piechart not getting display. And as I don't have control to update those json object property names as that response coming from api service.Now, how I can say to HighCharts use vendor & rating instaed of name & y to display piechart?
app.component.html
<highcharts-chart
[Highcharts]="Highcharts"
[options]="chartOptions"
style="width: 100%; height: 400px; display: block;"
></highcharts-chart>
推荐答案
不幸的是，Highcharts要求饼图类型的数据格式带有名称和y属性.
Unfortunately, Highcharts requires the data format with name and y properties for the pie chart type.
但是，可以简单地映射数据数组并使用映射的init调用init方法来完成.要使其工作，您可以包装init方法并在其之前映射数据(有关在此处扩展Highcharts的更多信息: 包装原型函数
However, it can be done simply mapping data array and invoking init method with mapped one. To make it work you can wrap init method and map data before it (more about extending Highcharts here: wrapping prototype function https://www.highcharts.com/docs/extending-highcharts/extending-highcharts).
自动换行代码:
(function(H) {
H.wrap(H.Series.prototype, 'init', function(proceed) {
var tempArr = [],
tempObj,
key;
arguments[2].data.forEach((elem, i) => {
tempObj = {
name: elem.vendor,
y: elem.rating
};
for (key in elem) {
if (elem.hasOwnProperty(key) && key !== 'vendor' && key !== 'rating') {
tempObj[key] = elem[key];
}
}
tempArr[i] = tempObj;
});
arguments[2].data = tempArr;
proceed.apply(this, Array.prototype.slice.call(arguments, 1));
});
})(Highcharts);
演示:
https://jsfiddle.net/BlackLabel/8ord92yk/
Demo:
https://jsfiddle.net/BlackLabel/8ord92yk/
API参考:
https://www.highcharts.com/docs/extending-highcharts/extending-高图
API reference:
https://www.highcharts.com/docs/extending-highcharts/extending-highcharts
语言:
要使其在Angular应用程序中起作用，您可以使用highcharts-angular官方包装，可以在此处下载: https://github.com/highcharts/highcharts-angular .在那里，您还将找到有关如何添加自定义包装的说明: https ://github.com/highcharts/highcharts-angular#to-load-a-wrapper .
ANGULAR:
To make it work in Angular app you can use highcharts-angular official wrapper which can be downloaded here: https://github.com/highcharts/highcharts-angular. There you will also find an instruction on how to add your custom wrapper: https://github.com/highcharts/highcharts-angular#to-load-a-wrapper.
带有包装的Angular应用程序演示:
https://codesandbox.io/s/m4z0628xk9
Demo of Angular app with the wrapper presented above:
https://codesandbox.io/s/m4z0628xk9
另一种方法是使用plotOptions.series.keys并传递仅包含值的数组.
Another approach is to use plotOptions.series.keys and pass an array with only values.
代码:
series: [{
type: 'pie',
name: 'Browser share',
keys: ['name', 'y', 'sliced', 'selected'],
data: [
['Firefox', 45.0],
['IE', 26.8],
['Chrome', 12.8, true, true],
['Safari', 8.5],
['Opera', 6.2],
['Others', 0.7]
]
}]
演示:
https://jsfiddle.net/BlackLabel/07cnxwqp/
Demo:
https://jsfiddle.net/BlackLabel/07cnxwqp/
API参考:
https://api.highcharts.com/highcharts/plotOptions.series.keys
这篇关于我们如何自定义系列数据对象属性名称"name"? & "y"作为highcharts-angle的一部分?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
