有什么方法可以使Charts.js中的折线图与分组的柱形图对齐?

时间:2019-07-24 13:48:49

标签: javascript graph chart.js

我有一个带有2个不同数据集的柱形图。结果是每个单元格有2列。当我想在数据与列对齐的同一张图上绘制折线图时,就会出现问题,因此我需要在同一单元格中的该线上有2个点。不幸的是,似乎Charts.js只能为每个单元格绘制1点的线。结果是这样的:

下面是该图的示例:https://i.imgur.com/jh3sV3D.png

有没有办法绘制折线图,​​使数据点与列正确对齐?

   type:"bar",
   data:{  
      "labels":[  
         "Team LQC1",
         "Team LQC5",
         "Team PRIO",
         "Team LQC9",
         "Team LQC2"
      ],
      datasets:[  
         {  
            type:"line",
            label:"Id",
            borderColor:"#ffa600",
            backgroundColor:"none",
            pointBackgroundColor:"#ffa600",
            fill:"none",
            data:[  
               1,
               7,
               2,
               8,
               3,
               9,
               4,
               10,
               5,
               11
            ]
         },
         {  
            data:[  
               1,
               2,
               3,
               4,
               5
            ],
            label:"This Week",
            backgroundColor:"#003f5c"
         },
         {  
            data:[  
               7,
               8,
               9,
               10,
               11
            ],
            label:"Previous Week",
            backgroundColor:"#7a5195"
         }
      ]
   },
   options:{  
      elements:{  
         line:{  
            tension: 0 // disables bezier curves
         },

      },
      maintainAspectRatio:false,
      responsive:true,
      legend:{  
         display:false,

      },
      scales:{  
         yAxes:[  
            {  
               scaleLabel:{  
                  display:true,
                  labelString:"Id",

               },
               ticks:{  
                  beginAtZero:true,

               },

            },

         ],

      },

   }

0 个答案:

没有答案