我正在尝试使用来自C#API的数据驱动Angular 6项目中的CoreUI图表(请参阅CoreUI实时演示页面以获取示例) .
以下是来自CoreUI仪表板示例的图表选项对象的示例:
public lineChart1Options: any = {
tooltips: {
enabled: false,
custom: CustomTooltips
},
maintainAspectRatio: false,
scales: {
xAxes: [{
gridLines: {
color: 'transparent',
zeroLineColor: 'transparent'
},
ticks: {
fontSize: 2,
fontColor: 'transparent',
}
}],
yAxes: [{
display: false,
ticks: {
display: false,
min: 40 - 5,
max: 84 + 5,
}
}],
},
elements: {
line: {
borderWidth: 1
},
point: {
radius: 4,
hitRadius: 10,
hoverRadius: 4,
},
},
legend: {
display: false
}
};
我已经创建了一大堆C#类,它们提供了所有必需的属性,但是当序列化为JSON时,格式有些不同......特别是在工具提示对象中,属性 custom: CustomTooltips
; CustomTooltips是从CoreUI库导入的:
import { CustomTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips';
还有其他问题,backgroundColor属性(在上面的示例中未显示,但在示例屏幕上显示)将接受Javascript函数,例如 backgroundColor: getStyle('--primary'),
最后,有几个属性似乎允许匿名函数 . 这是工具提示的另一个例子:
tooltips: {
enabled: false,
custom: CustomTooltips,
intersect: true,
mode: 'index',
position: 'nearest',
callbacks: {
labelColor: function(tooltipItem, chart) {
return { backgroundColor: chart.data.datasets[tooltipItem.datasetIndex].borderColor }
}
}
},
在我的C#代码中,我当前将它们存储为字符串,但自然在序列化时,它们反序列化为字符串,这将无法工作 .
是否可以以这样的方式序列化我的C#对象,我可以简单地将API调用的结果插入到函数调用中,例如 lineChart1Options: any = getChartOptionsObject();
?