Question

我正在制作一个带有3个x轴的图表，第一个到每天的每小时，第二个到显示日期，第三个到显示月份。我想按第二个x轴（按每月的每一天分组）和第三个 x轴（按每月分组）

我正在使用ChartJS绘制图表，我尝试了其他所有人的一些解决方案，但这与我期望的不一样。我的图片：

这是我的代码：

HTML：

<canvas id="mycanvas">

Javascript：

var data = [  
    {  
      "groupDate":"2019/07/01",
      "groupHour":"22",
      "groupMonth":"2019/07",
      "sumOuterDiameter":0,
      "sumMaterial":0,
      "sumTapChanged":0,
      "sumLength":1.0,
      "sumQty":8
   },
   {  
      "groupDate":"2019/07/01",
      "groupHour":"23",
      "groupMonth":"2019/07",
      "sumOuterDiameter":3,
      "sumMaterial":0,
      "sumTapChanged":0,
      "sumLength":4.0,
      "sumQty":28
   },
   {  
      "groupDate":"2019/07/02",
      "groupHour":"00",
      "groupMonth":"2019/07",
      "sumOuterDiameter":1,
      "sumMaterial":3,
      "sumTapChanged":0,
      "sumLength":5.0,
      "sumQty":22
   },
   {  
      "groupDate":"2019/07/02",
      "groupHour":"02",
      "groupMonth":"2019/07",
      "sumOuterDiameter":3,
      "sumMaterial":2,
      "sumTapChanged":0,
      "sumLength":5.0,
      "sumQty":21
   },
   {  
      "groupDate":"2019/07/02",
      "groupHour":"03",
      "groupMonth":"2019/07",
      "sumOuterDiameter":3,
      "sumMaterial":1,
      "sumTapChanged":0,
      "sumLength":3.0,
      "sumQty":11
   },
   {  
      "groupDate":"2019/07/02",
      "groupHour":"04",
      "groupMonth":"2019/07",
      "sumOuterDiameter":0,
      "sumMaterial":0,
      "sumTapChanged":0,
      "sumLength":1.0,
      "sumQty":52
   },
   {  
      "groupDate":"2019/07/02",
      "groupHour":"05",
      "groupMonth":"2019/07",
      "sumOuterDiameter":1,
      "sumMaterial":1,
      "sumTapChanged":0,
      "sumLength":1.0,
      "sumQty":4
   },
   {  
      "groupDate":"2019/07/02",
      "groupHour":"07",
      "groupMonth":"2019/07",
      "sumOuterDiameter":1,
      "sumMaterial":1,
      "sumTapChanged":0,
      "sumLength":1.0,
      "sumQty":24
   },
   {  
      "groupDate":"2019/07/02",
      "groupHour":"08",
      "groupMonth":"2019/07",
      "sumOuterDiameter":0,
      "sumMaterial":0,
      "sumTapChanged":0,
      "sumLength":0.0,
      "sumQty":24
   },
   {  
      "groupDate":"2019/07/02",
      "groupHour":"23",
      "groupMonth":"2019/07",
      "sumOuterDiameter":0,
      "sumMaterial":0,
      "sumTapChanged":0,
      "sumLength":1.0,
      "sumQty":52
   },
   {  
      "groupDate":"2019/07/03",
      "groupHour":"00",
      "groupMonth":"2019/07",
      "sumOuterDiameter":0,
      "sumMaterial":0,
      "sumTapChanged":0,
      "sumLength":0.0,
      "sumQty":48
   },
   {  
      "groupDate":"2019/07/03",
      "groupHour":"02",
      "groupMonth":"2019/07",
      "sumOuterDiameter":1,
      "sumMaterial":0,
      "sumTapChanged":0,
      "sumLength":2.0,
      "sumQty":28
   },
   {  
      "groupDate":"2019/07/03",
      "groupHour":"03",
      "groupMonth":"2019/07",
      "sumOuterDiameter":1,
      "sumMaterial":0,
      "sumTapChanged":0,
      "sumLength":1.0,
      "sumQty":50
   },
   {  
      "groupDate":"2019/07/03",
      "groupHour":"04",
      "groupMonth":"2019/07",
      "sumOuterDiameter":0,
      "sumMaterial":0,
      "sumTapChanged":0,
      "sumLength":1.0,
      "sumQty":24
   },
   {  
      "groupDate":"2019/07/03",
      "groupHour":"05",
      "groupMonth":"2019/07",
      "sumOuterDiameter":0,
      "sumMaterial":0,
      "sumTapChanged":0,
      "sumLength":0.0,
      "sumQty":26
   },
   {  
      "groupDate":"2019/07/03",
      "groupHour":"23",
      "groupMonth":"2019/07",
      "sumOuterDiameter":0,
      "sumMaterial":0,
      "sumTapChanged":0,
      "sumLength":1.0,
      "sumQty":72
   },
   {  
      "groupDate":"2019/07/04",
      "groupHour":"00",
      "groupMonth":"2019/07",
      "sumOuterDiameter":0,
      "sumMaterial":0,
      "sumTapChanged":0,
      "sumLength":0.0,
      "sumQty":28
   },
   {  
      "groupDate":"2019/07/04",
      "groupHour":"03",
      "groupMonth":"2019/07",
      "sumOuterDiameter":0,
      "sumMaterial":1,
      "sumTapChanged":0,
      "sumLength":1.0,
      "sumQty":88
   },
   {  
      "groupDate":"2019/07/04",
      "groupHour":"04",
      "groupMonth":"2019/07",
      "sumOuterDiameter":1,
      "sumMaterial":0,
      "sumTapChanged":0,
      "sumLength":1.0,
      "sumQty":20
   },
   {  
      "groupDate":"2019/07/04",
      "groupHour":"05",
      "groupMonth":"2019/07",
      "sumOuterDiameter":1,
      "sumMaterial":1,
      "sumTapChanged":0,
      "sumLength":1.0,
      "sumQty":34
   }
];



        var groupDate =[];
        var groupHour=[];
        var groupMonth=[];
        var sumLength =[];
        var sumMaterial =[];
        var sumTapChanged=[];
        var sumOuterDiameter = [];
                var TotalQty=[];
        var labelData = [];
        for(var i in data){
            groupDate.push("PartGroup"+ data[i].groupDate);
            groupHour.push(data[i].groupDate);
            groupMonth.push(data[i].groupMonth);
            sumLength.push(data[i].sumLength);
            sumMaterial.push(data[i].sumMaterial);
            sumTapChanged.push(data[i].sumTapChanged);
            sumOuterDiameter.push(data[i].sumOuterDiameter);
            TotalQty.push(data[i].sumQty);

            labelData.push(data[i].groupHour + "|" + data[i].groupDate + "|" + data[i].groupMonth);

        }

       var chartdata ={
           labels:labelData,
           datasets :[

                            {
                     type: 'line',
                     label: 'Qty',

                     borderColor: 'mediumseagreen',
                                        backgroundColor:'transparent',

                     yAxisID:'QuantityID',
                     data:TotalQty
                    },
                     {
                    type: 'bar',
                    label: 'OuterDiameter',
                    yAxisID: 'ProcessYAxis',
                    backgroundColor: "#00600f",
                    data: sumOuterDiameter,

                },
                {
                    type: 'bar',
                    label: 'Material',
                  yAxisID: 'ProcessYAxis',
                    backgroundColor: "#c30000",
                    data: sumMaterial
                },
                {
                    type: 'bar',
                    label: 'Length',
                   yAxisID: 'ProcessYAxis',
                    backgroundColor: "#ffea00",
                    data: sumLength
                },
                {
                    type: 'bar',
                    label: 'InternalThreadSize',
                   yAxisID: 'ProcessYAxis',
                    backgroundColor: "#2962ff",
                    data: sumTapChanged
                }

          ]
       };

        var ctx=$("#mycanvas");
        var barGraph =new Chart(ctx,{
            type: 'bar',
            data: chartdata,
            options: {
                scales: {
                    xAxes:[                  
          {
                        id: 'time',
                        type: 'category',
                        ticks: {
                            callback: function(label) {
                                var labelArray = label.split("|");
                                return  labelArray[0];  //hien thi label group theo gio
                            }
                        }
                    },
                    {
                        id: 'partGroupDate',
                        type: 'category',
                        gridLines: {
                            drawOnChartArea: false, // only want the grid lines for one axis to show up
                        },
                        ticks: {
                            callback: function(label) {
                                var labelArray = label.split("|");
                                return  labelArray[1];
                            }
                        }

                    },
            {
                        id: 'partGroupMonth',
                        type: 'category',
                        gridLines: {
                            drawOnChartArea: false, // only want the grid lines for one axis to show up
                        },
                        ticks: {
                            callback: function(label) {
                                var labelArray = label.split("|");
                                return  labelArray[2];
                            }
                        }

                    }


                     ],
          yAxes:[{

             id: 'QuantityID', //ID reference for line chart
                        type: 'linear',
                        position: 'right', //position of line in chart
                        scaleLabel: {
                            display: true,
                            labelString: 'Total Quantity' //name for 2nd line y-axis 
                        }

          },
          {
                        id: 'ProcessYAxis',
                        type: 'linear',
                        position: 'left',
                        ticks: {

                            min: 0
                        },
                        scaleLabel: {
                            display: true,
                            labelString: 'Setup times'
                        }
                    }

          ]
                }
            }


       });

我感谢大家的帮助。谢谢！

ChartJS-如何对多个x轴类别进行分组

0 个答案: