HighForts подсказка pointFormat - PullRequest
0 голосов
/ 02 июня 2018

Ниже приведен мой код для комбинированного графика Yii 1, включающего круговую диаграмму, гистограмму и линейный график.Для линейного графика я хочу отобразить точку после простого деления на 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----->
...