установить динамический график в области диаграммы - PullRequest
Новая
       2

установить динамический график в области диаграммы

0 голосов
/ 13 мая 2019

Я делаю один граф области динамически, в котором я хочу установить массив данных динамически. Я создал переменную и назначил ей Счеты, пример которых я привел ниже 

$dataPoints = '30, 10, 40, 20, 30, 10, 50, 30, 30, 30, 40';


var dataPoints1 = '<?php echo $dataPoints; ?>';

var areaChart = c3.generate({
        bindto: '#area-chart',
        data: {
            columns: [
                ['Score', dataPoints1]
            ],
            
            types: {
                data1: 'area',
                Score: 'area-spline'
            }
        },
        tooltip: {
            show: true
        },
        legend: {
            show: false
        },
        axis: {
            x: {
                show: false
            },
            y: {
                show: false
            },
        },
        grid:{
            focus:{
                show:false
            }         
        }  
    });

Но этот скрипт не работает, и он не показывает график, и если я установлю это значение статически, значит, он работает нормально.

Так кто-нибудь может мне помочь с этим ...

Ответы [ 2 ]

1 голос
/ 13 мая 2019

Вместо извлечения строки php в переменную js, передайте строку php непосредственно в столбец, это будет работать 

var areaChart = c3.generate({
    bindto: '#area-chart',
    data: {
        columns: [
            ['Score', <?php echo $dataPoints; ?>] // use php variable directly
        ],

        types: {
            data1: 'area',
            Score: 'area-spline'
        }
    },
    tooltip: {
        show: true
    },
    legend: {
        show: false
    },
    axis: {
        x: {
            show: false
        },
        y: {
            show: false
        },
    },
    grid:{
        focus:{
            show:false
        }         
    }  
});

Нет необходимости в переменной dataPoints1 js.

EDIT

В этом случае

В php я полагаю, ajax, 

$dataPoints["Score"] = [30, 10, 40, 20, 30, 10, 50, 30, 30, 30, 40];
echo json_encode($dataPoints); die;

В JS 

var chart = c3.generate({
    bindto: '#area-chart',
    data: {
        url: 'your url to fetch above data',
        mimeType: 'json',
        types: {
            data1: 'area',
            Score: 'area-spline'
        }
    },
    tooltip: {
        show: true
    },
    legend: {
        show: false
    },
    axis: {
        x: {
            show: false
        },
        y: {
            show: false
        },
    },
    grid: {
        focus: {
            show: false
        }
    }
});

Это должно решить вашу проблему

0 голосов
/ 13 мая 2019

Я использую ваш код в качестве примера и пытаюсь изменить код с помощью соединения с базой данных и данных примера таблицы.

Пожалуйста, попробуйте это, надеюсь, это вам пригодится.

Файл(PHP + HTML + jQuery) 

<?php
  $servername = "localhost"; // Change with your server name
  $username = "root"; // Change with your user name
  $password = ""; // // Change with your password
  $dbname = "test"; // // Change with your database name

  // Create connection
  $conn = new mysqli($servername, $username, $password, $dbname);
  // Check connection
  if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
  } 

  $sql = "SELECT data FROM users"; // // Change with your table name
  $result = $conn->query($sql);

  $dataPoints = '';
  if ($result->num_rows > 0) {
    while($row = $result->fetch_assoc()) {
        $dataPoints .= $row['data'];
        $dataPoints .= ',';
    }
    rtrim($dataPoints);
    echo $dataPoints;
  } else {
    echo "0 results";
  }
  $conn->close();
?>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>C3.js</title>
  <style type="text/css">
    body{
      text-align: center; 
    }

  </style>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.16/d3.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js"></script>
</head>
<body>
  <div class="container">
    <h1>Graphs made easy</h1>
    <div id="chart"></div>
  </div>
  <script type="text/javascript">

    var dataPoints1 = ["Score", <?php echo $dataPoints;?>];
    console.log('dataPoints : ', <?php echo $dataPoints;?>);
    console.log('data2 : ', dataPoints1);

    var areaChart = c3.generate({
      bindto: '#chart',
      data: {
        columns: [
            dataPoints1
        ],

        types: {
            data1: 'area',
            Score: 'area-spline'
        }
      },
      tooltip: {
        show: true
      },
      legend: {
        show: false
      },
      axis: {
        x: {
            show: false
        },
        y: {
            show: false
        },
      },
      grid:{
        focus:{
            show:false
        }         
      }  
    });
</script>
</body>
</html>

Вывод

enter image description here

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...