Question

我正在使用canvas.js来绘制多个图形。数据存储在json文件中，我将json文件中的数据插入每个变量中并绘制这些变量。在Json文件中的变量date，x1，x2，x3，x4，x5，x6。对于x1，我们应该绘制条形图对于x2，x3，我们应该绘制折线图，对于剩余变量，我们应该绘制面积图，但x轴上的日期重复。</ p>

<!DOCTYPE HTML>
<html>
<head>  
  <script type="text/javascript">
  var data = <?php print_r(json_encode($result, true)); ?>;



var x1 = [];
var x2 = [];
var x3 = [];
var x4=[];
var x5=[];
var x6=[];



//Data is represented as an array of {x,y} pairs.
// for (var i = 0; i < data.length; i++) {
    data.forEach(function(element) {

    x1.push({x: new Date(element.date), y: Number(element.x1) });
    x2.push({x: new Date(element.date), y: Number(element.x2) });
    x3.push({x: new Date(element.date), y: Number(element.x3) });
    x4.push({x: new Date(element.date), y: Number(element.x4) });
    x5.push({x: new Date(element.date), y: Number(element.x5) });
    x6.push({x: new Date(element.date), y: Number(element.x6) });
});
console.log(data);

  window.onload = function () {
    var chart = new CanvasJS.Chart("chartContainer",
    {
      title:{
        text: "Combo Graph"

      }, 
      interactivityEnabled: true, 
      zoomEnabled: true,
      zoomType: "xy",
      toolTip:{
        enabled: true,       //disable here
        animationEnabled: true //disable here
      },

      axisX: {
        valueFormatString: "D-MM-YYYY",

    },  
      data: [{        
        type: "column",
        name:"x1",
        color:"#3ed1d1 ",
        showInLegend: true,
        dataPoints:x1
      },
      {        
        type: "spline",
        name:"x2",
        lineThickness: 10,
        color:"#1a5276",
        showInLegend: true,
        dataPoints: x2
      },
      {        
        type: "column",
        color:"#671fb7",
        name:"x3",
        showInLegend: true,
        dataPoints:x3
      },
      {        
        type: "area",
        name:"x4",
        showInLegend: true,
        color:"#00cc00",
        dataPoints:x4
      },
      {        
        type: "area",
        name:"x5",
         showInLegend: true,
         color:"#cc0000",
        dataPoints:x5
      },
      {        
        type: "area",
        name:"x6",
        showInLegend: true,-
        color:"#e6e600",
        dataPoints:x6
      }

      ]
    });

    chart.render();
  }
  </script>
  <script type="text/javascript" src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
</head>
<body>
  <div id="chartContainer" style="height: 650px; width: 100%;">
  </div>
</body>
</html>

为什么同一日期在X轴上多次显示

0 个答案: