与 Angular 一起使用时，折线图（FusionCharts）不显示任何数据

Question

我正在尝试使用 Angular 和 fusionCharts 在 UI 中渲染折线图，但它的结果是 没有要显示的数据。其他图表（例如“mscolumn2d”）正在正常发布。这是我分别针对 .html 文件和 .ts 文件的代码片段。

    <div class="abc" id="demo-chart">
      <fusioncharts width="100%" height="100%" type="line" dataFormat="json" [dataSource]="demoChartData">
      </fusioncharts>
    </div>

  createDemoChart(response): void {
    const arrLabel = [];
    const datasetArr = [];
    const arrDataActual = [];
    for (let i = 0; i < 10; i++) {
      arrLabel.push({ label: 'Day ' + i });
      arrDataActual.push({ value: i });
    }
    datasetArr.push({data: arrDataActual });
    this.demoChartData = {
      chart: {
        theme: 'fusion',
        caption: 'Classes over Day',
        xaxisname: 'Day',
        yaxisname: 'No of Classes',
        showvalues: '0',
        anchorRadius: '6',
        anchorBorderThickness: '2',
        anchorBorderColor: '#ccccff',
        anchorBgColor: '#ccccff',
      },
      categories: [{
        category: arrLabel,
      }],
      dataset: datasetArr,
    };
  }

Answer 1

当数据源中未提供“类别”或为空时，将显示“没有数据可显示”图表消息。在您的实现中，检查“arrLabel”是否具有FusionCharts规定格式的类别对象数组。

还要确保其他对象数组（如“数据集”、“注释”等）按照实现中的格式接收值。

Answer 2

请注意，

line

和

msline

的数据结构不同。您需要以不同的方式提供数据或数据集，具体取决于图表是多系列图表还是单系列图表。

对于单系列折线图，请尝试以下操作：

createDemoChart(response): void {
  const arrDataActual = [];
  for (let i = 0; i < 10; i++) {
    arrDataActual.push({ label: `Day ${i}`, value: i });
  }
  this.demoChartData = {
    chart: {
      theme: 'fusion',
      caption: 'Classes over Day',
      xaxisname: 'Day',
      yaxisname: 'No of Classes',
      showvalues: '0',
      anchorRadius: '6',
      anchorBorderThickness: '2',
      anchorBorderColor: '#ccccff',
      anchorBgColor: '#ccccff',
    },
    data: arrDataActual,
  };
}

如果您希望保留数据结构，那么您需要在 html 中将类型从

line

更改为

msline

:

<div class="abc" id="demo-chart">
  <fusioncharts width="100%" height="100%" type="msline" dataFormat="json" [dataSource]="demoChartData">
  </fusioncharts>
</div>

Answer 3

折线图可以参考这里。当数据源中没有提供“类别”，或者为空或类型不匹配时，不显示用于显示图表消息的数据

    var app = angular.module("myApp", ["ng-fusioncharts"]);

app.controller("MyController", function($scope) {
  $scope.myDataSource = {
    chart: {
      caption: "Average Fastball Velocity",
      yaxisname: "Velocity (in mph)",
      subcaption: "[2005-2016]",
      numbersuffix: " mph",
      rotatelabels: "1",
      setadaptiveymin: "1",
      theme: "candy"
    },
    data: [
      {
        label: "2005",
        value: "89.45"
      },
      {
        label: "2006",
        value: "89.87"
      },
      {
        label: "2007",
        value: "89.64"
      },
      {
        label: "2008",
        value: "90.13"
      },
      {
        label: "2009",
        value: "90.67"
      },
      {
        label: "2010",
        value: "90.54"
      },
      {
        label: "2011",
        value: "90.75"
      },
      {
        label: "2012",
        value: "90.8"
      },
      {
        label: "2013",
        value: "91.16"
      },
      {
        label: "2014",
        value: "91.37"
      },
      {
        label: "2015",
        value: "91.66"
      },
      {
        label: "2016",
        value: "91.8"
      }
    ]
  };
});

配置图表 - https://www.fusioncharts.com/dev/getting-started/angular/angularjs/your-first-chart-using-angularjs

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