О JxChart

Компонент для создания графиков на сайте.

12 типов графиков: гистограмма (с накоплением, нормированная с накоплением), линейчатый (с накоплением, нормированный с накоплением), линии (с заливкой), кривые Безье (с заливкой), круговой и кольцевой.

Связь между несколькими компонентами.

Широкий набор настроек.

Новое в 1.00fПользовательские паттерны

Добавлена возможность передавать пользовательские(специальные) паттерны. Идентификатор паттерна считывается из массива данных графика.

Это позволяет создавать уникальные красивые графики.

Документация

Начало работы

Давайте начнём работу с JxChart!

В этом примере мы создаем гистограмму для одного набора данных и отображаем ее на HTML-странице. Добавьте этот фрагмент кода на свою страницу:

<div class="JxChart chart" id="JxChart_demo_1"></div>
<script src="https://jxchart.jas.ru/js/jxchart.js"></script>
<script>
	let ArrayTypes=new Array();
	let ArrayData=new Array();
	let ArrayFields=new Array();
	ArrayFields.push({title: "Дата", name: "date", chart_title: true});
	ArrayFields.push({color: "#83cfee", pattern: "full", show:"1", title: "Цена", name: "value", chart: true});
	ArrayTypes.push({id: "1", title: "Цена золота в рублях", chart_types: ['histogram', 'bar', 'line', 'line-fill', 'bezier', 'bezier-fill'], reverse: false, fields: ArrayFields});
	ArrayData.push({date: "2023-01", value: "4483"});
	ArrayData.push({date: "2023-02", value: "4601"});
	ArrayData.push({date: "2023-03", value: "6494"});
	ArrayData.push({date: "2023-04", value: "4855"});
	ArrayData.push({date: "2023-05", value: "3795"});
	ArrayData.push({date: "2023-06", value: "3382"});
	var options ={
		field_chart: 'JxChart_demo_1',
		chart: true,
		table: false,
		height: 250,
		current_type: 1,
		chart_bottom_padding: 30,
		height: 350,
		data: ArrayData,
	types: ArrayTypes
	};
	chart = new JxChart(options);
</script>

У вас должен получиться такой график:

Методы

Метод
Описание
ShowChart();
Показать график.
ShowTable();
Показать таблицу.
LoadData();
Загрузить данные.
LoadDataURL();
Загрузить данные по URL.
ControlSizeChart();
Увеличить (во весь экран) или уменьшить график.

Данные

Добавление ArrayTypes и ArrayFields, а также заполнение данными ArrayData.

Опции

Опция
Тип
По умолчанию
Описание
chart
boolean
true
Показывать график.
table
boolean
true
Показывать таблицу.
width
number
Ширина графика в пикселях.
height
number
Высота графика в пикселях.
chart_top_padding
number
Отступ графика сверху.
chart_bottom_padding
number
Отступ графика снизу.
chart_left_padding
number
Отступ графика слева.
chart_right_padding
number
Отступ графика справа.
current_type
chart_expand_collapse
boolean
false
Показывать кнопку увеличения графика на полный экран.
chart_legend_function
function
chart_legend
boolean
false
Показывать легенду.
chart_legend_stroke_radius
integer
chart_legend_stroke_width
integer
chart_legend_text_max_width
integer
chart_legend_text_percents
integer
chart_legend_clickable_disabled
boolean
field_chart
string
field_table
string
form
string
type
integer
url
string
grid_line_width
integer
grid_horizontal_text_max_width
integer
chart_max_pie_items
integer
types
array
Массив типов графиков.
data
array
Массив данных графиков.
special_patterns
array
Массив специальных паттернов.

Спасибо!