как я могу автоматически положить холст рядом с моим столом, если экран достаточно широк, а под ним? - PullRequest
Новая
       9

как я могу автоматически положить холст рядом с моим столом, если экран достаточно широк, а под ним?

0 голосов
/ 14 января 2019

У меня есть таблица с данными и график (chart.js), визуализирующий эти данные. График имеет тип «холст». Я не могу заставить их быть рядом друг с другом.

Я пытался:

  1. поплавок: левый
  2. помещая их обоих в один div
  3. колонок подсчет

... все дают неверные результаты. Float: left помещает только часть графика рядом с таблицей, в том же самом div ничего не дает, а количество столбцов ведет себя как float-left. 

<script src="/Chart.js"></script>
<article>
<h2>my data</h2>
<table><caption>nice data</caption><thead>
<tr><th>some value</th><th>%</th><th>more values</th></tr></thead>
<tbody>
<tr><td>€ 100,00</td><td>17,59%</td><td>10 0 09 39 09 </td></tr>
<tr><td>€ 250,00</td><td>5,86%</td><td>0 79 7 35 5 </td></tr>
<tr><td>€ 10 000,00</td><td>5,48%</td><td>09 09 36 56 05 </td></tr>
<tr><td>€ 100 000,00</td><td>5,01%</td><td>79 35 85 94 03 </td></tr>
<tr><td>€ 107,50</td><td>4,11%</td><td>89 69 49 09 53 </td></tr>
<tr><td>€ 1 000,00</td><td>3,06%</td><td>28 06 15 51 20 </td></tr>
<tr><td>€ 2 500,00</td><td>2,79%</td><td>10 39 77 17 25 </td></tr>
</tbody></table>
<div style="height:80vh;"><canvas id="bedrag_perc"></canvas></div>
<script>
var ctx = document.getElementById("bedrag_perc");
var myChart = new Chart(ctx, {
    type: 'doughnut',
    data: {
        labels: [100, 107, 250, 1000, 10000, 100000, 3.14],
        datasets: [{
            label: 'so much data',
            data: ['17.59', '4.11', '5.86', '3.06', '5.48', '5.01', '41.11'],
        }]
    },
    options: {
        animation: { duration: 0 },
        responsive: true,
        maintainAspectRatio: false
    }
});
</script> 
</article>

Хотелось бы, чтобы график располагался рядом с таблицей, если экран достаточно широкий, иначе под ним (адаптивный веб-дизайн).

Фактический результат состоит в том, что только половина диаграммы находится рядом с таблицей.

1 Ответ

0 голосов
/ 14 января 2019

Я использовал bootstrap, чтобы заставить его работать. ниже ссылка. надеюсь, это поможет.

http://jsfiddle.net/3vxtw786/1/999

...