Javascript图表从数据库中选择汇总数据

时间:2017-12-05 23:00:09

标签: javascript java mysql

Helloooo伙计们,我坚持不懈 我有一个单行图表应该从数据库中的特定列中选择数据并将其显示在图表中

 <script>
           var ctx = document.getElementById('myChart').getContext('2d');
 var chart = new Chart(ctx, {
// The type of chart we want to create
type: 'line',

// The data for our dataset
data: {
    labels: ["January", "February", "March", "April", "May", "June", "July", "August", "Septembrie", "Octombrie", "Noiembrie", "Decembrie"],
    datasets: [{
        label: "Vanzare Lunara",
        backgroundColor: 'rgb(255, 99, 132)',
        borderColor: 'rgb(255, 99, 132)',
        data: [600, 800, 100, 16, 20, 21, 22, 23, 25, 26, 26],
    }]
},

// Configuration options go here
options: {}
});
</script>

这是选择数据的脚本(600,800,100等)

数据库名称为highmob_comenzi,需要从2个表和列中选择数据并对其求和 表1 - 球员,列totalvanzare

表2 - vanzari,列totalvanzare

任何想法怎么做? :(

1 个答案:

答案 0 :(得分:1)

首先,您需要明确地进行数据库调用,以获得它的总和。然后你可以这样做:

$.ajax({
    url: 'url',
    type: 'POST', //Change this base on your requirement
    data: { 'data', 'some data if you need' },
    success: function (data) {
      var lineChartData = {
            labels: ["January", "February", "March", "April", "May", "June", "July", "August", "Septembrie", "Octombrie", "Noiembrie", "Decembrie"],
            datasets: [
                {
                    label: "Data set 1",
                    fillColor: "rgba(220,220,220,0.2)",
                    strokeColor: "rgb(23,127,255)",
                    pointColor: "rgb(23,127,255)",
                    pointStrokeColor: "#fff",
                    pointHighlightFill: "#fff",
                    pointHighlightStroke: "rgba(220,220,220,1)",
                    data: [data1, data2, data3]
                }
            ]

        }

        var options =
        {
            showTooltips: true,
            onAnimationComplete: function () { this.showTooltip(this.datasets[0].points, true); render(); },
            tooltipEvents: [],
            responsive: true,
            scaleFontColor: "#5BC236",
            scaleColor: "#000"
        }

        var ctx = document.getElementById("graph1").getContext("2d");
        var chart = new Chart(ctx).Line(lineChartData, options);
    }

function render() {
    var url = document.getElementById("graph1").toDataURL();
    document.getElementById("url1").src = url;
}

希望这有帮助。