Как сверстать эту таблицу с графиком?

Question

Нужно использовать табличную вёрстку и также нужно использовать http://www.highcharts.com/demo/ или что-то подобное

Answer 1

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

Highcharts.chart('chart',{
  title : { text: null },   
  legend: { enabled: false} ,
  yAxis:  { title: { text: null }},  
  credits: { enabled: false },
  series: [{data: [0,3,2,2,7,6.5, 8,7,8,7.5] }]
});

th, td { background-color: #f0f0f0; padding: .5rem 1rem; }
th { font-size: .9em;}
.blue { background-color: lightblue; }
.red { color: red; }

.white { background: white; }
#chart { min-height: 200px; }

<script src="https://code.highcharts.com/highcharts.js"></script>
<table>
  <thead>
    <tr>
      <th>Показатель</th><th class="blue">Сегодня</th><th colspan="2">Вчера</th>
    </tr>
  </thead>
  <tbody>
    <tr><td>Выручка</td><td class="blue">500</td><td>480</td><td class="red">-3%</td></tr>
    <tr><td colspan="4" class="white"><div id="chart"></div></td></tr>
    <tr><td>Выручка</td><td class="blue">500</td><td>480</td><td class="red">-3%</td></tr>    
  </tbody>
</table>

БЛОГ НА HUSL

Как сверстать эту таблицу с графиком?

Ответы (1 шт):