как показать метки гистограммы на основе значений - PullRequest
Новая
       24

как показать метки гистограммы на основе значений

0 голосов
/ 07 апреля 2020

Я использую Canvas JS .charts, используя javascript и php, вот php код: 

$sql = "select count(*) from test1 where MONTH(`call_date`)=MONTH(CURRENT_DATE()) and Year(call_date) = YEAR(CURDATE()) ";  
$result = mysqli_query($link,$sql);
$row = mysqli_fetch_array($result);
$sql1 = "select count(*) from test2 where MONTH(`call_date`)=MONTH(CURRENT_DATE()) and Year(call_date) = YEAR(CURDATE())";  

$result1 = mysqli_query($link,$sql1);
$row1 = mysqli_fetch_array($result1);
$row11 = $row[0]+$row1[0];

$sql = "select count(*) from test3 where MONTH(`call_date`)=MONTH(CURRENT_DATE()) and Year(call_date) = YEAR(CURDATE()) ";  
$result = mysqli_query($link,$sql);
$row12 = mysqli_fetch_array($result);
$sql1 = "select count(*) from test4 where MONTH(`call_date`)=MONTH(CURRENT_DATE()) and Year(call_date) = YEAR(CURDATE())";  

$result1 = mysqli_query($link,$sql1);
$row13 = mysqli_fetch_array($result1);
$row112 = $row12[0]+$row13[0];

$dataPoints1 = array(
                array("x"=>1, "y"=>$row11),
                array("x"=>2, "y"=>$row112),//type tq

            );

это Javascript код: 

window.onload = function() {
var chart = new CanvasJS.Chart("barChartContainer", {
    animationEnabled: true,
    exportEnabled: true,
    theme: "light1", // "light1", "light2", "dark1", "dark2"
    //title:{
        //text: "Simple Column Chart with Index Labels"
    //},
    axisX: {

        //prefix: "$",
        suffix:  "", //hr
        interval: 1
    },
    data: [{
        //type: "bar",
        type: "column", //change type to bar, line, area, pie, etc
        //indexLabel: "{y}", //Shows y value on all Data Points
        indexLabel: "{y}",
        yValueFormatString: "#,##0",
        indexLabelFontColor: '#121111', //"#5A5757",
        indexLabelPlacement: "outside",   
        dataPoints: <?php echo json_encode($dataPoints1, JSON_NUMERIC_CHECK); ?>
    }]
});
setColor(chart);
chart.render();
function setColor(chart){
                for(var i = 0; i < chart.options.data.length; i++) {
                dataSeries = chart.options.data[i];
                for(var j = 0; j < dataSeries.dataPoints.length; j++){
                    if(dataSeries.dataPoints[j].y < 51){
                    dataSeries.dataPoints[j].color = '#6eba01';
                    } if(dataSeries.dataPoints[j].y >= 51){
                    dataSeries.dataPoints[j].color = '#1a2b6d';
                } if(dataSeries.dataPoints[j].y >= 101) {
                    dataSeries.dataPoints[j].color = 'orange';
                }
                }
            }
}
}

Здесь в каждом баре я показываю значения типа 20,30, эти значения являются результатом двух запросов, таких как таблицы с именами test1 и test2. Здесь мое требование состоит в том, чтобы я мог показывать значения по отдельности на hover на панели.

Теперь он показывает, когда я нахожу курсор на первом баре, он показывает 1:20 следующий 2:30 вместо этого Мне нужно, например, incoming:10 outgoing:10 и incoming:10 outgoing:20.

: один столбец содержит 20 значений, 20 значений 10 из таблицы test1 и 10 из таблицы test2, поэтому должно отображаться как test1:10 test2:10 we I наведите курсор на этот индикаторный бар.

...