谷歌图表排序禁用

Question

我使用下面的代码来创建一个谷歌图表，我在Y轴上显示警报，在X轴上显示月份，在这里我试图显示带有条形图的数据以及它的趋势线，我面临的问题是数据即将进行排序，即当前月份是sep即09，那么数据将在y轴上从01到12个月，但我想要的是数据按09的顺序排列，即当前月份是持续 10 11 12 01 02 03 04 05 06 07 08 09

代码中的

ticks变量包含值“10 11 12 01 02 03 04 05 06 07 08 09 “

var options = {
                        title: '<?php echo "Alerts Trend Analysis $TEAM";?>',
                        hAxis: {title: 'MONTH' ,gridlines: { count: 12 },ticks: [ <?php echo $TICKS;?>] },
                        vAxis: {title: 'Alerts'},
                        curveType: 'function',
                        titleFontSize:15,
                        fontName : 'Arial',
                        titleFontName: 'Arial',
                         trendlines: {
                                        0: {type: 'polynomial', lineWidth: 2, opacity: .5},
                                        1: {type: 'polynomial', lineWidth: 2, opacity: .5},
                                        2: {type: 'polynomial', lineWidth: 2, opacity: .5},
                                        3: {type: 'polynomial', lineWidth: 2, opacity: .5},
                                        4: {type: 'polynomial', lineWidth: 2, opacity: .5}
                                     },

                        series: {
                        0: { color: 'green' },
                        1: { color: 'orange' },
                        2: { color: 'blue' },
                        3: { color: 'red' },
                        4: { color: 'purple' },
                        5: { color: 'black' }
                        },
                        legend: { position: 'right',textStyle: {fontSize: 12}}
                };

                var chart = new google.visualization.ColumnChart(document.getElementById('curve_chart'));

                chart.draw(data, options);
                }

我在csv文件中使用的数据，用于上传变量

VHPLUSLIVE,0:0:0:0:0:0:0,0:0:0:0:0:0:0,4:0:0:1:0:0:0,0:0:0:0:0:0:0,0:0:0:0:0:0:0,0:0:0:0:0:0:0,4:0:0:1:0:0:0
VHPLUSQA,0:0:0:0:0:0:0,0:0:0:1:0:0:0,22:3:0:5:0:0:0,0:0:0:0:0:0:0,0:0:0:0:0:0:0,0:0:0:0:0:0:0,22:3:0:6:0:0:0
VHLIVE,0:0:0:0:0:0:0,0:0:0:0:1:0:0,18:5:0:4:0:0:0,0:0:0:0:0:0:0,0:0:0:0:0:0:0,0:0:0:0:0:0:0,18:5:0:4:1:0:0
LIVE,0:0:0:0:0:0:0,152:17:1:42:2:0:0,197:28:2:66:2:0:0,0:0:0:0:0:0:0,0:0:0:0:0:0:0,0:0:0:0:0:0:0,349:45:3:108:4:0:0
QA,0:0:0:0:0:0:0,28:2:1:7:1:1:0,152:17:0:36:0:3:0,0:0:0:0:0:0:0,0:0:0:0:0:0:0,0:0:0:0:0:0:0,180:19:1:43:1:4:0
TEST,0:0:0:0:0:0:0,7:2:0:4:1:0:0,14:3:0:0:0:0:0,0:0:0:0:0:0:0,0:0:0:0:0:0:0,0:0:0:0:0:0:0,21:5:0:4:1:0:0
OTHERS,0:0:0:0:0:0:,83:13:0:14:1:0:,49:8:0:13:1:0:,0:0:0:3:0:0:0,0:0:0:0:0:0:0,0:0:0:0:0:0:,132:21:0:30:2:0:0
ALL,0:0:0:0:0:0:0,270:34:2:68:6:1:0,456:64:2:125:3:3:0,0:0:0:3:0:0:0,0:0:0:0:0:0:0,0:0:0:0:0:0:0,726:98:4:201:9:4:0

此外，我用于将数据放入变量的代码如下所示

 for ($MONTH=$CURMONTH + 1;$MONTH<=12;$MONTH++)
     {
        if ( $MONTH < 10 )
        {
             $MONTH="0" . $MONTH;
        }
        else
        {
             $MONTH="". $MONTH;
        }


        if ( "$STAT" == "Ack_time" )
        {
        $FILE="/OVO/ALERTS/${TEAM}_${MONTH}.ack.count";
        }
        elseif ( "$STAT" == "Own_time" )
        {
        $FILE="/OVO/ALERTS/${TEAM}_${MONTH}.own.count";
        }

        $filer=fopen("${FILE}","r");
        $pattern="/\b$Env\b/";
                while (!feof($filer))
                {
                        $line = fgets($filer);
                        if (preg_match("$pattern", $line, $match))
                        {
                                $line=explode(",",$line);
                                break;
                        }
                }
                fclose($filer);

                if ( "$Criticity" == "Critical" )
                {
                        $line=$line[1];
                        $line=explode(":",$line);
                }
                elseif ( "$Criticity" == "Major" )
                {
                        $line=$line[2];
                        $line=explode(":",$line);
                }
                elseif ( "$Criticity" == "Minor" )
                {
                        $line=$line[3];
                        $line=explode(":",$line);
                }
                elseif ( "$Criticity" == "Warning" )
                {
                        $line=$line[4];
                        $line=explode(":",$line);
                }
                elseif ( "$Criticity" == "Normal" )
                {
                        $line=$line[5];
                        $line=explode(":",$line);
                }
                elseif ( "$Criticity" == "OTHERS" )
                {
                        $line=$line[6];
                        $line=explode(":",$line);
                }
                elseif ( "$Criticity" == "ALL" )
                {
                        $line=$line[7];
                        $line=explode(":",$line);
                }



        $count_8=$line[0];
        $count_24=$line[1];
        $count_48=$line[2];
        $count_120=$line[3];
        $count_240=$line[4];
        $count_480=$line[5];
        $count_rest=$line[6];

        $count_all=$count_8+$count_24+$count_48+$count_120+$count_240+$count_480+$count_rest;



        if ( "$MONTH" == "01" )
        {
                $MON="January";
        }
        if ( "$MONTH" == "02" )
        {
                $MON="February";
        }
        if ( "$MONTH" == "03" )
        {
                $MON="March";
        }
        if ( "$MONTH" == "04" )
        {
                $MON="April";
        }
        if ( "$MONTH" == "05" )
        {
                $MON="May";
        }
        if ( "$MONTH" == "06" )
        {
                $MON="June";
        }
        if ( "$MONTH" == "07" )
        {
                $MON="July";
        }
        if ( "$MONTH" == "08" )
        {
                $MON="August";
        }
        if ( "$MONTH" == "09" )
        {
                $MON="September";
        }
        if ( "$MONTH" == "10" )
        {
                $MON="October";
        }
        if ( "$MONTH" == "11" )
        {
                $MON="November";
        }
        if ( "$MONTH" == "12" )
        {
                $MON="December";
        }

        if ( "$MONTH" == "13" )
        {
                $MON="Quarter_1";
        }

        if ( "$MONTH" == "14" )
        {
                $MON="Quarter_2";
        }

        if ( "$MONTH" == "15" )
        {
                $MON="Quarter_3";
        }
        if ( "$MONTH" == "16" )
        {
                $MON="Quarter_4";
        }

        //pushing some variables to the array so we can output something in this example.

                //pushing some variables to the array so we can output something in this example.
        if ( $STAT == "Ack_time" )
        {
        array_push($values, array("MONTH" => "${MONTH}","Ack <8h" => $count_8,"Ack 8h-24h" => $count_24,"Ack 24h-48h" => $count_48,"Ack 48h-120h" => $count_120,"Ack 120h-240h" => $count_240,"Ack 240h-480h" => $count_480,"Ack > 480h" => $count_rest ));
        }

        if ( $STAT == "Own_time" )
        {
        array_push($values, array("MONTH" => "${MONTH}","Own <8h" => $count_8,"Own 8h-24h" => $count_24,"Own 24h-48h" => $count_48,"Own 48h-120h" => $count_120,"Own 120h-240h" => $count_240,"Own 240h-480h" => $count_480,"Own > 480h" => $count_rest ));
        }


    }

    for ($MONTH=01;$MONTH<=$CURMONTH;$MONTH++)
     {
        if ( $MONTH < 10 )
        {
             $MONTH="0" . $MONTH;
        }
        else
        {
             $MONTH="". $MONTH;
        }



        if ( "$STAT" == "Ack_time" )
        {
        $FILE="/OVO/ALERTS/${TEAM}_${MONTH}.ack.count";
        }
        elseif ( "$STAT" == "Own_time" )
        {
        $FILE="/OVO/ALERTS/${TEAM}_${MONTH}.own.count";
        }

        $filer=fopen("${FILE}","r");
        $pattern="/\b$Env\b/";
                while (!feof($filer))
                {
                        $line = fgets($filer);
                        if (preg_match("$pattern", $line, $match))
                        {
                                $line=explode(",",$line);
                                break;
                        }
                }
                fclose($filer);

                if ( "$Criticity" == "Critical" )
                {
                        $line=$line[1];
                        $line=explode(":",$line);
                }
                elseif ( "$Criticity" == "Major" )
                {
                        $line=$line[2];
                        $line=explode(":",$line);
                }
                elseif ( "$Criticity" == "Minor" )
                {
                        $line=$line[3];
                        $line=explode(":",$line);
                }
                elseif ( "$Criticity" == "Warning" )
                {
                        $line=$line[4];
                        $line=explode(":",$line);
                }
                elseif ( "$Criticity" == "Normal" )
                {
                        $line=$line[5];
                        $line=explode(":",$line);
                }
                elseif ( "$Criticity" == "OTHERS" )
                {
                        $line=$line[6];
                        $line=explode(":",$line);
                }
                elseif ( "$Criticity" == "ALL" )
                {
                        $line=$line[7];
                        $line=explode(":",$line);
                }



        $count_8=$line[0];
        $count_24=$line[1];
        $count_48=$line[2];
        $count_120=$line[3];
        $count_240=$line[4];
        $count_480=$line[5];
        $count_rest=$line[6];

        $count_all=$count_8+$count_24+$count_48+$count_120+$count_240+$count_480+$count_rest;

        //pushing some variables to the array so we can output something in this example.




        if ( "$MONTH" == "01" )
        {
                $MON="January";
        }
        if ( "$MONTH" == "02" )
        {
                $MON="February";
        }
        if ( "$MONTH" == "03" )
        {
                $MON="March";
        }
        if ( "$MONTH" == "04" )
        {
                $MON="April";
        }
        if ( "$MONTH" == "05" )
        {
                $MON="May";
        }
        if ( "$MONTH" == "06" )
        {
                $MON="June";
        }
        if ( "$MONTH" == "07" )
        {
                $MON="July";
        }
        if ( "$MONTH" == "08" )
        {
                $MON="August";
        }
        if ( "$MONTH" == "09" )
        {
                $MON="September";
        }
        if ( "$MONTH" == "10" )
        {
                $MON="October";
        }
        if ( "$MONTH" == "11" )
        {
                $MON="November";
        }
        if ( "$MONTH" == "12" )
        {
                $MON="December";
        }

        if ( "$MONTH" == "13" )
        {
                $MON="Quarter_1";
        }

        if ( "$MONTH" == "14" )
        {
                $MON="Quarter_2";
        }

        if ( "$MONTH" == "15" )
        {
                $MON="Quarter_3";
        }
        if ( "$MONTH" == "16" )
        {
                $MON="Quarter_4";
        }

        //pushing some variables to the array so we can output something in this example.


        if ( $STAT == "Ack_time" )
        {
        array_push($values, array("MONTH" => "${MONTH}","Ack <8h" => $count_8,"Ack 8h-24h" => $count_24,"Ack 24h-48h" => $count_48,"Ack 48h-120h" => $count_120,"Ack 120h-240h" => $count_240,"Ack 240h-480h" => $count_480,"Ack > 480h" => $count_rest ));
        }

        if ( $STAT == "Own_time" )
        {
        array_push($values, array("MONTH" => "${MONTH}","Own <8h" => $count_8,"Own 8h-24h" => $count_24,"Own 24h-48h" => $count_48,"Own 48h-120h" => $count_120,"Own 120h-240h" => $count_240,"Own 240h-480h" => $count_480,"Own > 480h" => $count_rest ));
        }


    }

}


//counting the length of the array
$countArrayLength = count($values);

Answer 1

正如您所发现的，图表将按逻辑顺序对连续轴进行排序 这不能改变

但是，您可以在数据表值和刻度中使用对象表示法 使用一个值并显示另一个

使用对象表示法，您可以提供值（v:）和格式化值（f:）

表示月份数，如果前三行= 10,11,12
下一行需要是13

在数据表中使用...

{v: 13, f: '1'}

这样可以为您提供所需的订单，工具提示会显示'1'

要修正x轴，此行的刻度将是同一个对象...

请参阅以下工作代码段...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['month', 'alerts'],
    [10, 97],
    [11, 100],
    [12, 80],
    [{v: 13, f: '1'}, 105],
    [{v: 14, f: '2'}, 60],
    [{v: 15, f: '3'}, 88],
    [{v: 16, f: '4'}, 77],
    [{v: 17, f: '5'}, 90],
    [{v: 18, f: '6'}, 67],
    [{v: 19, f: '7'}, 52],
    [{v: 20, f: '8'}, 67],
    [{v: 21, f: '9'}, 80]
  ]);

  var ticks = [
    10, 11, 12,
    {v: 13, f: '1'},
    {v: 14, f: '2'},
    {v: 15, f: '3'},
    {v: 16, f: '4'},
    {v: 17, f: '5'},
    {v: 18, f: '6'},
    {v: 19, f: '7'},
    {v: 20, f: '8'},
    {v: 21, f: '9'}
  ];

  var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
  chart.draw(data, {
    hAxis: {ticks: ticks},
    trendlines: {0: {}}
  });
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

如果在php中很难实现，
使用以下代码段来操纵JavaScript中的数据和滴答 注意：在这种情况下，数据表需要按所需顺序

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['month', 'alerts'],
    [10, 97],
    [11, 100],
    [12, 80],
    [1, 105],
    [2, 60],
    [3, 88],
    [4, 77],
    [5, 90],
    [6, 67],
    [7, 52],
    [8, 67],
    [9, 80]
  ]);

  var ticks = [];
  var firstMonth;
  for (var i = 0; i < data.getNumberOfRows(); i++) {
    var rowMonth = data.getValue(i, 0);
    if (i === 0) {
      firstMonth = rowMonth;
    } else {
      if (rowMonth < firstMonth) {
        data.setCell(i, 0, rowMonth + 12, rowMonth.toString());
      }
    }
    ticks.push({
      v: data.getValue(i, 0),
      f: rowMonth.toString()
    });
  }

  var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
  chart.draw(data, {
    hAxis: {ticks: ticks},
    trendlines: {0: {}}
  });
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

Answer 2

我遇到了类似的问题，试图绘制40-52周流感疫情，然后是1-39周。 Google图表将其绘制为1-52，然后以从52到1的直线回绕。

我通过将data.addColumn('number', 'Flu Season Week');更改为data.addColumn('string', 'Flu Season Week');并使用Python return '% 2d' % week为它提供了一个空格对齐的字符串来解决了该问题

在https://jc.unternet.net/covid19/查看结果。 javascript在chart2.js和fludata.js中。