1 В избранное 0 Ответвления 0

OSCHINA-MIRROR/cheng5x-YcHighCharts

В этом репозитории не указан файл с открытой лицензией (LICENSE). При использовании обратитесь к конкретному описанию проекта и его зависимостям в коде.
Клонировать/Скачать
README.md 3.9 КБ
Копировать Редактировать Web IDE Исходные данные Просмотреть построчно История
gitlife-traslator Отправлено 26.11.2024 01:51 9d7c260

Highcharts — это библиотека на чистом JavaScript, предназначенная для создания диаграмм. Основные характеристики:

  • Совместимость: работает со всеми современными браузерами, включая iPhone, IE и Firefox.
  • Бесплатно: доступна для личного использования бесплатно.
  • Чистый JavaScript: не содержит дополнительных библиотек.
  • Поддержка различных типов диаграмм: линейные, кривые, площадные, гистограммы, круговые диаграммы, точечные диаграммы.
  • Кросс-языковая поддержка: может использоваться с PHP, Asp.net или Java, требует всего три файла: ядро Highcharts (файл highcharts.js), эмулятор canvas для IE и библиотеку jQuery или MooTools.
  • Функция подсказки: при наведении курсора на точку диаграммы появляется подсказка.
  • Масштабирование: можно увеличить часть диаграммы для более детального просмотра.
  • Простота использования: не требует специальных навыков разработки, достаточно настроить параметры.
  • Временная шкала: позволяет отображать данные с точностью до миллисекунды.

Скачать Highcharts можно по адресу: http://www.highcharts.com/download.

Также можно скачать jQuery по ссылке: http://jquery.com/.

Необходимые скрипты:

<script src="../../Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>
<script src="../../Content/Highcharts-3.0.9/js/highcharts.js" type="t/javascript"></script>
<script src="../../Content/Highcharts-3.0.9/js/modules/exporting.js" type="text/javascript"></script>
<script src="../../Content/Highcharts-3.0.9/js/highcharts-more.js" type="text/javascript"></script>

Фрагмент отображения на стороне клиента:

$('#canvasDiv').highcharts({
            chart: {
                type: '@Model[0].Type'
            },
            title: {
                text:  '@Model[0].Title'
            },
            subtitle: {
                text: '@Model[0].Subtitle'
            },
            xAxis: {
                categories: @Html.Raw(Model[0].XAxis.CategoriesJson)
            },
            yAxis: {
                title: {
                    text: '@Model[0].YAxis.Title'
                },
                labels: {
                    formatter: function () {
                        return this.value + '次'
                    }
                }
            },
            tooltip: {
                crosshairs: true,
                shared: true
            },
            plotOptions: {
                spline: {
                    marker: {
                        radius: 4,
                        lineColor: '#666666',
                        lineWidth: 1
                    }
                }
            },
            series: @Html.Raw(Model[0].SeriesJson)
        });

Фрагмент привязки данных в контроллере:

Демонстрация эффекта:

Опубликовать ( 0 )

Вы можете оставить комментарий после Вход в систему

1
https://api.gitlife.ru/oschina-mirror/cheng5x-YcHighCharts.git
git@api.gitlife.ru:oschina-mirror/cheng5x-YcHighCharts.git
oschina-mirror
cheng5x-YcHighCharts
cheng5x-YcHighCharts
master