Как можно сделать такой график?

Question

[Denoro55]

Не знаю, как сделать заливку снизу вверх. То есть, как бы вместо чисел слева идет заливка (допустим, минимальное значение красным, максимальное зеленым). Покопался во всяких библиотеках для графиков типа chart.js chartlist.js c3.js и тд и не нашел. Может можно как-то самому нарисовать по простому?

Answer 1

[Denoro55]

Кажется я нашел решение jsfiddle.net/azuL1ets/1

Решение простое. Нужно просто знать svg. Делаем градиент для линии.

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="640" height="440">
  <!-- CHARTS GRADIENT -->
  <defs>
    <linearGradient id="grad1" gradientUnits="userSpaceOnUse" x1="50" y1="350" x2="50" y2="220">
      <stop offset="0%" style="stop-color:#00ff43;" />
      <stop offset="50%" style="stop-color:#f9fd27;" />
      <stop offset="100%" style="stop-color:#f20000;" />
    </linearGradient>
  </defs>
  <!-- CHART -->
  <polyline points="
	  50,350
	  60,340
	  70,345
	  80,330
	  90,320
	  100,325
	  " style="fill:none;" stroke="url(#grad1)" stroke-width="3" stroke-linecap="round" />
</svg>

Comments

[origami1024]

нойс, опиши в чем суть, ато через месяц jsfiddle удалится, и никто не узнает