Как показать пользователю «информацию о потреблении», подобную этой картинке? - PullRequest
Новая
       9

Как показать пользователю «информацию о потреблении», подобную этой картинке?

0 голосов
/ 25 июня 2018

Извините, но я не могу объяснить лучше, чем показ этой картинки

Использование информации

Есть ли уже реализованная библиотека / загрузчик / код, который может отображать информациюнравится эта картина?Я даже не могу назвать это ... это не круговая диаграмма, я не знаю, как назвать это, но я думаю, что это должно быть где-то уже реализовано.

Мне нужно показать число вродена этом изображении, где бы пользователь ни использовал это значение, оно должно уменьшаться на этой «круговой диаграмме».

Заранее всем спасибо!

1 Ответ

0 голосов
/ 25 июня 2018

Я думаю, что «датчик» является лучшим названием для чего-то подобного, вы можете создать его, используя библиотеку:

http://bernii.github.io/gauge.js/

И следующий код 

var opts = {
   angle: 0.35, // The span of the gauge arc
   lineWidth: 0.1, // The line thickness
   radiusScale: 1, // Relative radius
   pointer: {
       length: 0.6, // // Relative to gauge radius
       strokeWidth: 0.035, // The thickness
       color: '#000000' // Fill color
   },
   limitMax: false,     // If false, max value increases automatically if value > maxValue
   limitMin: false,     // If true, the min value of the gauge will be fixed
   colorStart: '#6F6EA0',   // Colors
   colorStop: '#C0C0DB',    // just experiment with them
   strokeColor: '#EEEEEE',  // to see which ones work best for you
   generateGradient: true,
   highDpiSupport: true,     // High resolution support

};

var target = document.getElementById('graph'); // your canvas element
var gauge = new Donut(target).setOptions(opts); // create sexy gauge!
gauge.maxValue = 3000; // set max gauge value
gauge.setMinValue(0);  // Prefer setter over gauge.minValue = 0
gauge.animationSpeed = 32; // set animation speed (32 is default value)
gauge.set(1250); // set actual value

Не забудьте включить скрипт на своей странице и добавить элемент с идентификатором «graph» на свою страницу, например, 

<div id="graph"></div>
...