Question

请帮助我，我不知道如何使用ChartJs在图表栏中显示我的数据

这是我的卖桌

id  | product     | stock | 
1   | brown cloth | 50    |
2   | jeans neavy | 35    |

这是我的控制人

public function chart2()
{
   $sell= DB::table('sell')->get();
       return view('myblade')>with('sell',json_encode($sell,JSON_NUMERIC_CHECK));
}

我想将产品显示为标签，将斯托克显示为数据，这是购物车栏

var db == {{ url('chart2') }}; // your db object
          var your_labels  = new Array();
          var your_data = new Array();  //array that will hold your data

          db.forEach((item, index, arr) => {
            your_labels.push(item.product);
            your_data.push(item.stock);
          })

          var myChart = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: your_labels, 
                datasets: [{
                    label: '# of stocks',
                    data: your_data, 
                    backgroundColor: "rgba(220,220,220,0.5)",  //create them the same way. with same size 1 for each data entry
                    borderColor: color_border_array,
                    borderWidth: 1
                }]
            },
            options: {
                scales: {
                    yAxes: [{
                        ticks: {
                            beginAtZero:true
                        }
                    }]
                }
            }
        });

这是画布

<div class="panel panel-default">
    <div class="panel-heading text-center"><b>Data Penjualan</b></div>
      <div class="panel-body">
        <canvas id="canvas" height="280" width="400"></canvas>
    </div>
</div>

Answer 1

这是您可以对数据库执行基本迭代并初始化标签和数据数组的方式

var db; // your db object
var your_labels, your_data;  //array that will hold your data

db.forEach((item, index, arr) => {
  your_labels.push(item.product);
  your_data.push(item.stock);
})

像这样通过初始化将它们传递到图表中。

var myChart = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: your_labels, 
                datasets: [{
                    label: '# of stocks',
                    data: your_data, 
                    backgroundColor: color_background_array,  //create them the same way. with same size 1 for each data entry
                    borderColor: color_border_array,
                    borderWidth: 1
                }]
            },
            options: {
                scales: {
                    yAxes: [{
                        ticks: {
                            beginAtZero:true
                        }
                    }]
                }
            }
        });

要记住的重要一点是，您将不得不自己查看db对象的迭代。我不知道您在使用什么以及如何使用它。

如何使用Chart JS在图表中显示数据

1 个答案: