Question

我尝试使用chartjs创建多条形图。但是没有根据每个公司名称显示jobType和jobCount。

这是桌子

这是php文件（ CompanySeletion.php ）：

<?php

header('Content-Type:application/json');

define('DB_HOST','127.0.0.1');
define('DB_USERNAME','root');
define('DB_PASSWORD','');
define('DB_NAME','newmanpower');

$mysqli =new mysqli(DB_HOST,DB_USERNAME,DB_PASSWORD, DB_NAME);

if(!$mysqli){

    die("Connection failed: ".$mysqli->error);
}

//$selected = $_GET['Month'];
$selected=3;
$query = sprintf("SELECT jobType,jobCount,comName FROM graphview group by jobType,comName");

$result= $mysqli->query($query);

$data =array();

foreach ($result as $row){
    $data[]= $row;
}
$result->close();
$mysqli->close();

print json_encode($data);


?>

这是JS文件（ testingbutton.js ）：

 $(document).ready(function(){
    $.ajax({
        url: "http://localhost/chartjs/CompanySeletion.php",
        method: "GET",
        success: function (data) {
            console.log(data);
            var jobType = [];
            var jobCount = [];
            var comName=[];
            var chartColors = {
            green: 'rgb(70, 214, 8)',
            red: 'rgb(242, 26, 2)'
           };




            for (var i in data) 
            {
                jobType.push( data[i].jobType);
                jobCount.push(data[i].jobCount);
                comName.push(data[i].comName);
            }


var ctx = document.getElementById("mycanvas").getContext('2d');
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: jobType,
        datasets: [{
            label: comName[0],
            data: jobCount(comName[0]),
            backgroundColor: [],
            borderColor: [],
            borderWidth: 1

        },
        {
            label: comName[1],
            data: jobCount ,
            backgroundColor: [],
            borderColor: [],
            borderWidth: 1
        },

        ]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        }
    }
});

var colorChangeValue = 1; 
var dataset = myChart.data.datasets[0];
var dataset = myChart.data.datasets[1];
for (var i = 0; i < dataset.data.length; i++) {
  if (dataset.data[i] > colorChangeValue) {
    dataset.backgroundColor[i] = chartColors.green;
  }
  else  {
    dataset.backgroundColor[i] = chartColors.red;
  }

}
myChart.update();


},
    error: function (data) {
        console.log(data);
    }


    });
});

这是HTML文件：

<!DOCTYPE html>
<html>
  <head>
    <script src="jquery-3.0.0.js"></script>
    <script src="jquery-ui.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript" src="https://code.jquery.com/color/jquery.color-2.1.2.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.1/Chart.bundle.js"></script>
    <link rel="stylesheet" href="stylesheet.css">
   <style type="text/css">
        #chart-container {
            width: 640px;
            heigth: auto;
        }
    </style>

  <title>Job Progress</title>
  </head>
  <body>


    <canvas height='75' width='200' id="mycanvas"></canvas>

    <!-- javascript -->
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/Chart.min.js"></script>
    <script type="text/javascript" src="js/testingbutton.js"></script>
  </body>
</html>

这是根据上述代码示例接收的输出：

在上图中，它两次显示相同的作业类型。有人可以提出解决方案吗？

Answer 1

您应该通过以下方式传递数据以获得所需的输出。所有需要在x轴上显示的项目都应在labels数组中传递，然后应将每个数据集（例如“皮尔逊”和“ srinath”）作为单独的数据集传递，且数据应作为x的对应值-轴。小提琴-> http://jsfiddle.net/Lzo5g01n/25/

var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ["CPI", "Cutting", "Ironing", "Mending"],
        datasets: [{
            label: 'Pearson',
            data: [1, 1, 0, 1],
            backgroundColor: 'rgba(255, 99, 132, 0.2)',              
            borderColor: 'rgba(255,99,132,1)',
            borderWidth: 1
        },{
            label: 'srinath',
            data: [1, 0, 1, 0],
            backgroundColor: 'rgba(54, 162, 235, 0.2)',              
            borderColor: 'rgba(54, 162, 235, 1)',
            borderWidth: 1
        }
    ]},
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        }
    }
});

条形图未在Chart.js中正确分组

1 个答案: