Обычное масштабирование колеса в сетке pyecharts
В pyecharts я создаю сетку с двумя графиками, имеющими одну и ту же ось X. Я хотел бы иметь возможность масштабировать оба изображения одновременно с помощью колеса мыши. Это работает на одном графике, используя datazoom_opts=[opts.DataZoomOpts(type_ = "inside")], но я не смог найти способ сделать что-то подобное в Grid.
В библиотеке javascript echarts есть метод echarts.connect, который, кажется, делает это (например, echarts.connect([chart1, chart2]);), но, похоже, он не существует в pyecharts.
Пожалуйста, смотрите ниже минимальный функциональный пример:
from pyecharts import options as opts
from pyecharts.charts import Bar, Grid
# if you're using jupyter lab
from pyecharts.globals import CurrentConfig, NotebookType
CurrentConfig.NOTEBOOK_TYPE = NotebookType.JUPYTER_LAB
CurrentConfig.ONLINE_HOST
from random import randrange
x=list(range(0,100))
a = Bar()
a.add_xaxis(x)
a.add_yaxis("ax", [randrange(100) for x in range(0,100)])
a.set_global_opts(
title_opts=opts.TitleOpts(title = "Bar-a"),
datazoom_opts=[opts.DataZoomOpts(type_ = "inside")],)
b = Bar()
b.add_xaxis(x)
b.add_yaxis("bx", [randrange(100) for x in range(0,100)])
b.set_global_opts(
title_opts=opts.TitleOpts(title = "Bar-b"),
datazoom_opts=[opts.DataZoomOpts(type_ = "inside")],)
gr = Grid()
gr.add(a, grid_opts=opts.GridOpts(height = "30%"))
gr.add(b, grid_opts=opts.GridOpts(pos_top = "50%", height = "30%"))
gr.render_notebook()
Я могу увеличивать и уменьшать масштаб первого графика (а) с помощью колесика мыши. Второй — статический. Я хочу увеличить масштаб обоих, сохраняя их выравнивание.
Ответы 1
Я не знаю, как именно это делается в pyecharts, но в echarts вы можете создать несколько экземпляров сетки внутри одной диаграммы и указать, какие оси должны находиться в какой сетке и какие оси должны управляться масштабированием. См. этот официальный пример.
Свойство xaxis_index объекта DataZoomOpts в документации pyecharts указывает, что это тоже должно быть возможно. GridOpts можно найти здесь . И этот пример с использованием нескольких сеток также может быть полезен. Просто отсутствует dataZoom.
const data = [[1,120], [2,200], [3,150], [4,80], [5,70], [6,110], [7,130]];
option = {
grid: [{bottom: '52%'},{top: '52%'}],
xAxis: [{},{gridIndex: 1}],
yAxis: [{},{gridIndex: 1}],
dataZoom: {xAxisIndex: [0,1]},
series: [
{
type: 'bar',
data: data
},
{
type: 'bar',
xAxisIndex: 1,
yAxisIndex: 1,
data: data
}
]
};
Обновлено:
Маттиас Мертенс указал мне правильное направление. Вот код Python, отредактированный так, чтобы оба графика реагировали на масштабирование колесика мыши. Пожалуйста, смотрите комментарии в коде.
from pyecharts import options as opts
from pyecharts.charts import Bar, Grid
# if you're using jupyter lab
from pyecharts.globals import CurrentConfig, NotebookType
CurrentConfig.NOTEBOOK_TYPE = NotebookType.JUPYTER_LAB
CurrentConfig.ONLINE_HOST
from random import randrange
x=list(range(0,100))
a = Bar()
a.add_xaxis(x)
a.add_yaxis("ax", [randrange(100) for x in range(0,100)], yaxis_index=1)
# DataZoomOpts can be set here and are valid for graph "b" also.
# Or they can be set after Grid creation as below
#a.set_global_opts(
# title_opts=opts.TitleOpts(title = "Bar-a"),
# datazoom_opts=[opts.DataZoomOpts(type_ = "inside", xaxis_index=[0, 1])],)
b = Bar()
b.add_xaxis(x)
b.add_yaxis("bx", [randrange(100) for x in range(0,100)], yaxis_index=2)
#Not necessary to set DataZoomOpts here
gr = Grid()
gr.add(a, grid_opts=opts.GridOpts(height = "30%"))
gr.add(b, grid_opts=opts.GridOpts(pos_top = "50%", height = "30%"))
# DataZoomOpts set directly on options Dictionary for xaxis_index of
# both graphs [0, 1]
gr.options['dataZoom'] = opts.DataZoomOpts(type_='inside', xaxis_index=[0, 1])
gr.render_notebook()
Это улучшение ответа, так что я не возражаю.
Вы указали мне правильное направление. Спасибо. Вы не возражаете, если я отредактирую ваш ответ с исправленным кодом Python, прежде чем принять его?