Highcharts工具提示pointFormat

时间:2018-06-02 06:18:31

标签: highcharts yii yii-extensions

下面是我的Yii 1 highcharts组合图的代码,其中包括饼图,条形图和折线图。对于折线图,我想在进行简单除法后显示10点(即,如果点值为60,则当光标位于该点上方时应显示6)。但是使用我的下面的代码它显示为60/10而不是6.此外,我希望这个除法仅针对折线图而不是其他两个图。请帮我解决这个问题。

<!---Start Combination Chart ----->
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="combination"><div id="container1" style="min-width: 310px; height: 500px; margin: 0 auto"></div></div>
<script>
var x=<?php echo json_encode(array_values($subjectList));?>;
Highcharts.setOptions({
        colors: ['blue', '#bd1111', '#1b670e', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4']
    });

Highcharts.chart('container1', {
  title: {
    text: '<b>Passed/Failed Students</b>',
    margin: 110
  },
  xAxis: {
    categories: x,
    title: {
      text: '<-------- Name Of Subjects ------->'
    }
  },
  yAxis: {
    title: {
      text: 'Number Of Students'
    }
  },
  plotOptions: {
    series: {
      dataLabels: {
        enabled: true,
        format: '{point.y}'
      }
    }
  },
  credits: {
      enabled: false
  },
  exporting: { enabled: false },
  series: [{
    type: 'column',
    name: 'Passed',
    data: <?php echo json_encode($passedMarkList);?>//[60, 60, 41, 23, 49, 34, 23, 44]
  }, {
    type: 'column',
    name: 'Failed',
    data: <?php echo json_encode($failedMarkList);?>
  },

{
    type: 'line',
    tooltip: {
    pointFormat: '<span>{point.name}</span>: <b>{point.y}/10</b><br/>'
  },
    name: 'Subject Average GPA',
    data: [60, 80, 40, 80, 50, 90, 70, 0, 60, 50],
    marker: {
      lineWidth: 2,
      lineColor: Highcharts.getOptions().colors[3],
      fillColor: 'white'
    }
  },


 {
    type: 'pie',
    tooltip: {
    headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
    pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y}</b><br/>'
  },

    name: 'Total Number Of Students',
    data: [
    {
      name: 'PASSED',
      y: <?php echo json_encode($semesterPassStudents);?>,
      color: Highcharts.getOptions().colors[0] // Jane's color
    },
    {
      name: 'FAILED',
      y: <?php echo json_encode($semesterFailStudents);?>,
      color: Highcharts.getOptions().colors[1] // John's color
    },
    {
      name: 'Result Not Yet Published',
      y: <?php echo json_encode($resultUnPublished);?>,
      dataLabels: {
      enabled: false,
    },
      color: Highcharts.getOptions().colors[5] // John's color

    },
    ],
    center: [80, -90],
    size: 150,
   showInLegend: false,
    dataLabels: {
      enabled: true,
      format: '<b>{point.name}</b><br>{point.percentage:.1f} %',
       distance: -30,
    }
  }]
});
</script>
<!---End Combination Chart-----> 

以下是我解析的视图页面来源

<!---Start Combination Chart ----->
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="combination"><div id="container1" style="min-width: 310px; height: 500px; margin: 0 auto"></div></div>
<script>
var x=["MA101 - CALCULUS","PH100 - ENGG. PHYSICS","BE100 - ENGG. MECHANICS","BE101-05 - INTRODUCTION TO COMPUTING & PROBLEM SOLVING","BE103 - INTRODUCTION TO SUSTAINABLE ENGG.","EC100 - BASICS OF ELECTRONICS ENGG.","PH110 - ENGG. PHYSICS LAB","EC110 - ELECTRONICS ENGG. WORKSHOP","CS110 - COMPUTER SCIENCE WORKSHOP","U100-2 - MICROPROJECT"];
Highcharts.setOptions({
        colors: ['blue', '#bd1111', '#1b670e', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4']
    });

Highcharts.chart('container1', {
  title: {
    text: '<b>Passed/Failed Students</b>',
    margin: 110
  },
  xAxis: {
    categories: x,
    title: {
      text: '<-------- Name Of Subjects ------->'
    }
  },
  yAxis: {
    title: {
      text: 'Number Of Students'
    }
  },
  plotOptions: {
    series: {
      dataLabels: {
        enabled: true,
        format: '{point.y}'
      }
    }
  },
  credits: {
      enabled: false
  },
  exporting: { enabled: false },
  series: [{
    type: 'column',
    name: 'Passed',
    data: [60,59,61,62,61,62,62,53,59,62]//[60, 60, 41, 23, 49, 34, 23, 44]
  }, {
    type: 'column',
    name: 'Failed',
    data: [2,3,1,0,1,0,0,9,3,0]  },{
    type: 'line',
    tooltip: {
    headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
    pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y}/10 %</b><br/>'
  },
    name: 'Subject Average GPA',
    data: [60, 80, 40, 80, 50, 90, 70, 0, 60, 50],
    marker: {
      lineWidth: 2,
      lineColor: Highcharts.getOptions().colors[3],
      fillColor: 'white'
    }
  }, {
    type: 'pie',
    tooltip: {
    headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
    pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y}</b><br/>'
  },

    name: 'Total Number Of Students',
    data: [
    {
      name: 'PASSED',
      y: 46,
      color: Highcharts.getOptions().colors[0] // Jane's color
    },
    {
      name: 'FAILED',
      y: 16,
      color: Highcharts.getOptions().colors[1] // John's color
    },
    {
      name: 'Result Not Yet Published',
      y: 2,
      dataLabels: {
      enabled: false,
    },
      color: Highcharts.getOptions().colors[5] // John's color

    },
    ],
    center: [80, -90],
    size: 150,
   showInLegend: false,
    dataLabels: {
      enabled: true,
      format: '<b>{point.name}</b><br>{point.percentage:.1f} %',
       distance: -30,
    }
  }]
});
</script>
<!---End Combination Chart----->

0 个答案:

没有答案