在融合图表Angular 8中添加数据加载消息

Question

如何在组件端不使用渲染功能的情况下，在融合图表中加载数据之前显示消息？

所以我使用以下代码创建了图表：

<fusioncharts width="100%" height="600" [type]="metric.type" [dataSource]="metric"> </fusioncharts>

这里我将图表数据作为 JSON 传递到 dataSource 中，因此我不需要组件端的渲染函数，并且我的图表工作正常。

我已阅读文档，但找不到任何通过 JSON 设置 dataLoadStartMessage 的方法。

Answer 1

在FusionCharts指令中，您可以调用所有消息类型参数，例如，当数据加载时您可以使用dataEmptyMessage属性，这里是一个演示片段

<fusioncharts width="100%" height="600" [type]="metric.type" [dataSource]="metric" dataEmptyMessage="Please wait data is loading"> </fusioncharts>

Answer 2

您可以更改图表整个生命周期中出现的图表状态消息的文本和样式

var revenueChart = new FusionCharts({
    type: 'column2d',
    dataLoadStartMessage: "Fetching revenue data for the previous year",
    renderAt: 'chart-container',
    width: '550',
    height: '350',
    dataFormat: 'xmlurl',
    dataSource: 'columndata.php'
});

要自定义 dataLoadStartMessage 的样式，属性将为：

dataLoadStartMessageFont: 'Helvetica',
dataLoadStartMessageFontSize: '24',
dataLoadStartMessageColor: ‘#00FF00'

有关此功能的更多信息，请参阅 - https://www.fusioncharts.com/dev/common-use-cases/change-chart-messages#setting-custom-messages

这是演示小提琴 - https://codepen.io/pen?&editors=101&layout=left