Question

我有两个图表，我试图在同一页面上的单独div上加载。我尝试了这段代码，但是当我在页面中显示一个图表时，它无法正常工作。这两个代码只是相似的数据发生了变化。我认为问题出在模板中。任何人都可以帮我找到解决方案吗？我使用angular2-highchart。

 @Component({
 selector: 'chartist-js',
 template: `
 <chart [options]="chartOptions$ | async" style="min-width: 1000px;">
 </chart> <br><chart [options]="chartOptions1$ | async" style="min-
  width: 1000px;"></chart>`,
 providers : [ChartistJsService]
  })
 export class ChartistJs {
 chartOptions$: Observable<any>;
 chartOptions1$: Observable<any>;

 constructor(private dataService: ChartistJsService) {
 this.chartOptions$ = this.dataService.chartData$
 this.chartOptions1$ = this.dataService.chartData$
 .map(data =>
 {this.createChartOptions(data),this.createChartOptions_(data)});
   }

ngOnInit() {
// triggers a fetch of the data to feed the observable
 this.dataService.getData();

   }

 private createChartOptions(data) {
  return {
    chart: {
         type: 'line'
      },
        xAxis: {
          type: 'datetime',
            categories: 
                data.result.map(function (obj) {
                  console.log(obj._id)
                  return obj._id;
                })

        },
        yAxis: {
            title: {
                text: 'ce'
            }
        },
        series: [{
            name: 'eddddd',
            data: data.result.map(function (obj) {
              console.log(obj.amount)
return obj.amount; })
                                                                                                  }
        ]

    };
 }

     private createChartOptions_(data) {
     return {
      chart: {
         type: 'line' 
      },
        xAxis: {
          type: 'datetime',
            categories: 
                data.result.map(function (obj) {
                  return obj._id;
                })

        },
        yAxis: {
            title: {
                text: 'sd'
            }
        },
        series: [{
            name: 'sdf',
            data: data.result1.map(function (obj) {
            return obj.taux; })                                                                                                      
                }]
       };
     }
   }

Answer 1

看起来您正在将相同的可观察数据流传递到两个图表中。在某些地方，数据可能会在每个图表中发生变异 - 这就是为什么当你有2个图表时数据会中断的原因。每个图表都在改变数据并打破另一个图表。但是当只有一张图表时，没关系。尝试两件事，首先，在对数据执行任何操作之前，先复制数组中的每个项目：

BOOL CBasicApp::InitInstance()
{
    typedef BOOL (__stdcall *pFunc) ();

    int main(int argc, char* argv[])
    {
        pFunc pf = 0;

        HMODULE hMod = 0;

        hMod = LoadLibrary("dbgghelp.dll");

        if (!hMod)
        {
            printf("File not found: Dbgghelp.DLL\n");
            return 0;

        }

        pf = GetProcAddress(hMod,"L100A6F95");

如果这不起作用，我会尝试将2个完全不相关的对象硬编码到2个图表中，看看2个图表是否会渲染。然后你就会确定共享是否会导致你的问题。

如何使用angular2在一个页面上显示两个图表

1 个答案: