数据和工具提示不能用于使用高图的图形

Data and tooltip not working for graph using highcharts

本文关键字:高图 图形 用于 工具提示 不能 数据      更新时间:2023-09-26

我试图得到一个基本的柱状图工作,我将趋势maphours(y轴),reducehours(y轴)为特定的工作(工具提示)在特定的一天(x轴)。

我正在用y轴值和jobname值填充数据数组,我希望在工具提示中显示这些值。x轴值是一个日期戳(一个日值,即x轴上的一个日期)。

问题-图形容器正在启动,但它没有拾取y轴值和工具提示。

填充数组的代码-

            var obj = data;
            var jobSummaryMappersPT = [];
            var jobSummaryReducersPT = [];
            var jobSummaryMappersDB = [];
            var jobSummaryReducersDB = [];
            var datestamp = [];
            for(i=0;i<obj.length-1;i++){
                  if(obj[i].grid=='PT'){
                          jobSummaryMappersPT.push({mappers: obj[i].maphours, jobname: obj[i].jobname}); // Filling of Array after Ajax Call
                          jobSummaryReducersPT.push({reducers: obj[i].reducehours, jobname: obj[i].jobname}); //Filling of Array
                          datestamp.push(obj[i].date.replace('T00:00:00.000Z', ' '));
                  }else{ 
                          jobSummaryMappersDB.push({mappers: obj[i].maphours, jobname: obj[i].jobname}); // Filling of Array after Ajax Call
                          jobSummaryReducersDB.push({reducers: obj[i].reducehours, jobname: obj[i].jobname}); //Filling of Array
                  }
            }
            job_summary_chart(jobSummaryMappersPT, jobSummaryReducersPT, jobSummaryMappersDB, jobSummaryReducersDB, datestamp);

初始化Highcharts的函数-

 function job_summary_chart(jobSummaryMappersPT, jobSummaryReducersPT, jobSummaryMappersDB, jobSummaryReducersDB, datestamp){
    $(function () {
    $('#job_summary_pt').highcharts({
     // Other Highchart Properties
     chart: {
                                              type: 'column'
                                              },
                                              title: {
                            text: 'Job Summary',
                                  x: -20 //center
                            },
                            subtitle: {
                                text: 'Source: DFTBA',
                                x: -20
                            },
                            xAxis: {
                              categories: datestamp,
                              labels: {
                                      rotation: -45,
                                      y: 30,
                                      align: 'center',
                                      step: 4
                              }
                            },
                            yAxis: {
                                title: {
                                      text: 'GbHrs'
                                },
                                plotLines: [{
                                      value: 0,
                                      width: 1,
                                      color: '#808080'
                                }]   
                            }, 
                            tooltip: {
                                valueSuffix: ' GbHrs',
                                formatter: function() { return ' ' +
                                    'Jobname: ' + this.point.jobname + '<br />'
                               } 
                            },
                            legend: {
                                layout: 'vertical',
                                align: 'right',
                                verticalAlign: 'middle',
                                borderWidth: 0
                              },
                            series: [{
                               data: jobSummaryMappersPT
                            },{
                               data: jobSummaryReducersPT
                            }]
                        }); 

我对jobSummaryMappersPT做了console.log,值如下:

 [Object { mappers=97, jobname="abcd.pig"}, 
     Object { mappers=33, jobname="abcd.pig"},          
     Object { mappers=31, jobname="abcd.pig"}, 
     Object { mappers=15, jobname="abcd.pig"}, 
     Object { mappers=15, jobname="abcd.pig"}, 
     Object { mappers=12, jobname="abcd.pig"}]

我认为问题是在映射器和jobname之后的"="符号。在数据属性中,它接受冒号= ":",这就是为什么图形不拾取值?

我如何解决这个问题,让图形工作?并获得工具提示以显示jobname?

如果我理解正确,您的问题不仅是工具提示,图表甚至无法呈现您的数据。您将mappersreducers设置为Y值的属性名称,但是 highcharts如何知道这些属性应该选择Y值?

将属性mappersreducers更改为y应该可以工作:

jobSummaryMappersPT.push({y: obj[i].maphours, jobname: obj[i].jobname}); // Filling of Array after Ajax Call
jobSummaryReducersPT.push({y: obj[i].reducehours, jobname: obj[i].jobname}); //Filling of Array

tooltip的代码看起来不错