1. Test11 - 23 Декабря, 2015 - 16:15:43 - перейти к сообщению
Подскажите пожалуйста простенький скрипт js, генерирующий график с учетом вертикали и горизонтали. Спс...
2. esterio - 23 Декабря, 2015 - 16:44:18 - перейти к сообщению
http://www[dot]chartjs[dot]org/
http://www[dot]highcharts[dot]com/
Лично использовал highcharts. Понравилось
http://www[dot]highcharts[dot]com/
Лично использовал highcharts. Понравилось
3. DelphinPRO - 23 Декабря, 2015 - 17:04:20 - перейти к сообщению
плюсану за highcharts. Удобная, мощная и довольно простая библиотечка для построения любых графиков
4. Test11 - 23 Декабря, 2015 - 17:16:11 - перейти к сообщению
Не подкинете чарт который не нуждается в библиотеке jquery...?
5. DelphinPRO - 23 Декабря, 2015 - 19:14:34 - перейти к сообщению
Highchart - независимая библиотека. JQuery не требуется. Можно писать с ним, но не обязательно
6. Test11 - 23 Декабря, 2015 - 20:29:46 - перейти к сообщению
DelphinPRO пишет:
Highchart - независимая библиотека. JQuery не требуется. Можно писать с ним, но не обязательно
Хм, у меня работает только с библиотекой.
Что не так с кодом?
CODE (html):
скопировать код в буфер обмена
скопировать код в буфер обмена
- <html slick-uniqueid="3"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
- <head>
- <script src="https://code.highcharts.com/highcharts.js"></script>
- <script type="text/javascript">
- window.onload = function () {
- document.getElementById("container").highcharts({
- chart: {
- type: 'column'
- },
- title: {
- text: 'Monthly Average Rainfall'
- },
- subtitle: {
- text: 'Source: WorldClimate.com'
- },
- xAxis: {
- categories: [
- 'Jan',
- 'Feb',
- 'Mar',
- 'Apr',
- 'May',
- 'Jun',
- 'Jul',
- 'Aug',
- 'Sep',
- 'Oct',
- 'Nov',
- 'Dec'
- ],
- crosshair: true
- },
- yAxis: {
- min: 0,
- title: {
- text: 'Rainfall (mm)'
- }
- },
- tooltip: {
- headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
- pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
- '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
- footerFormat: '</table>',
- shared: true,
- useHTML: true
- },
- plotOptions: {
- column: {
- pointPadding: 0.2,
- borderWidth: 0
- }
- },
- series: [{
- name: 'Тест',
- data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
- }, {
- name: 'Тест1',
- data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3]
- }]
- });
- }
- </script>
- </head>
- <body>
- <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
- </body>
- </html>