предисловие
Как машинистку на фронтенде, кроме стервы зеленого чая, больше всего раздражает диаграмма: одна меня огорчает, другая огорчает; еще больше раздражает, чем это, библиотека диаграмм с непонятными документами (наверное, девять лет я не плохо выучил китайский во время обязательного образования), я люблю его и ненавижу! Поэтому этот пост в блоге будет скучным, и я лишь вкратце опишу процесс использования BizCharts.Конечно же, важно обобщить встречавшиеся ямы (следуйте принципу не наступить на яму дважды, и не замочить девушку дважды).
Кстати, когда дело доходит до BizCharts, позвольте поблагодарить Alibaba: она открыла доступ к этой полезной (хотя иногда и не такой простой в использовании, а иногда и довольно частой) библиотеке реактивных диаграмм для всех, и это очень важно использовать. Стек технологий реагирования — это благо для наборщиков переднего плана. В этой статье не будет слишком много объяснений API, конкретный интерфейс можно увидеть в документации официального сайта.врата ада.
серьезная длина
В начале визуальный дизайнер уговаривал меня и говорил: «Мои требования не высоки, относитесь ко мне так же хорошо, как и раньше», ааа, неправильно, «Мои требования: пока данные могут отображаться в виде гистограммы, они будут будь в порядке», так просто
// 引入相关的组件
import { Chart, Axis, Tooltip, Geom } from 'bizcharts';
// 随便mock一下数据
const str = ['we', 'are', 'the', 'black', 'gold', 'team'];
const mockData = () => {
let result = [];
for (let i = 0, len = 6; i < len; i++) {
result.push({
xAxis: ticks[i],
yAxis: Math.floor(Math.random() * 100)
});
}
return result;
};
// 图表组件
<Chart
width={ 600 }
height={ 400 }
data={ mockData() }
>
{/* x轴，横轴，以data数据的xAxis属性值为柱子的值 */}
<Axis name="xAxis" />
{/* y轴，纵轴，以data数据的yAxis属性值为柱子的值 */}
<Axis name="yAxis" />
{/* 鼠标hover直方图柱子的时候，tooltip显示的值 */}
<Tooltip />
{/* 几何标记对象，主要用以描述你要画的是什么图形（直方图、折线图、饼状图、区域图）：interval是直方图 */}
<Geom
type="interval"
position="xAxis*yAxis"
/>
</Chart>
Волна операций свирепа, как собака, пусть визуальный дизайнер увидит эффект:
Примечание. Каждый столбец этой гистограммы представляет собой отдельную точку, то есть он отражает положение данных с определенной точкой абсцисс. Для соединения нам нужен непрерывный столбец интервала, тогда значение поля данных как xAxis должно быть массивом, содержащим два элемента, указывающих начальное значение интервала.
const mockData = () => {
let result = [];
for (let i = 0, len = 6; i < len; i++) {
result.push({
xAxis: [i + 0.01, i + 1 - 0.01], // 如果不加减0.01，那么第一根柱子的终点跟第二根柱子的起点是同一个，会感觉两个柱子粘在一起
yAxis: Math.floor(Math.random() * 100)
});
}
return result;
};
Визуальный дизайнер: "эммммммм, а длина и ширина графика будут фиксированными, не будет ли он жестковатым, высоту можно записывать до смерти, а ширина должна быть адаптивной, да?"
"Massy Terrace"
<Chart
height={ 400 }
data={ mockData() }
forceFit // 我妈说了（guanfang wendang shuode），加上这个属性就可以使图表宽度自适应了，隔壁echart同学要学习一下
>
</Chart>
Волна эффектов
Видение (милая улыбка): "Обезьяна, у тебя ошибка в этой штуке"
"Чепуха, ты глупый * не можешь использовать это"
(справедливо) "Хм, ширина графика в увеличенном окне действительно будет адаптивной, но он будет зависать при уменьшении масштаба (не адаптивном), аххххх"
(лестно) "Ненавижу, дай мне еще две минуты~~ Позвольте мне превратить жука в лед..."
примечание: эксперименты показали, что если родительский компонент компонента диаграммы использует гибкую компоновку, то есть отец использует гибкую адаптивную ширину, возникнет описанная выше проблема; поэтому, если в параллельной компоновке несколько диаграмм, не используйте гибкую компоновку. , дайте Установите ширину компонента «Отец» в процентах, и в это время будет работать forceFit. В то же время в BizCharts есть настройки защиты от сотрясений при перерисовке, и перерисовка будет происходить только тогда, когда вы прекратите масштабирование.
(облажался) "конец, используй это"
(с презрительным взглядом) "Вау~ Это потрясающе, позволь мне немного подкорректировать детали, обещаю, совсем чуть-чуть!"
"Давай детка!"
"
- Когда мышка наводится на столб, почему за столбом уродливая коробка? Меняй цвет!
- Когда указатель мыши наводится на столбец, всплывающая подсказка выглядит некрасиво. Позже я создам ее для вас.
- Когда мышь наводит столбец, цвет столбца должен меняться, что более удобно для пользователя! ! !
- ...эй, не бери нож~~~
"
После убийства видения нужно еще нужно выполнить, сначала разгадать первое последнее желание умершего.
Компонент Tooltip предоставляет свойство crosshairs для установки вспомогательных линий и вспомогательных полей всплывающей подсказки; по умолчанию это свойство включает вертикальные вспомогательные линии для компонентов Geom типа «линия», «область», «путь» и «область стека». прямоугольная фоновая рамка для компонентов Geom типа «интервал». Это уродливая коробка, сказал покойник!
<Tooltip crosshairs={ false }/>
Ладно, сними коробку! Эй, разве мы не хотели изменить его цвет? хорошо, поменяй
<Tooltip
crosshairs={{
type: "rect" // 可选值：rect、x、y、cross，分别对应辅助狂、平行x轴辅助线、平行y轴辅助线，十字辅助线
style: {
fill: 'red', // 辅助框颜色
shadowColor: 'red', // 辅助框周边阴影的颜色
shadowBlur: 1, // 辅助框周边阴影的透明度
opacity: 0 // 辅助框的透明度
}
}}
/>
Примечание. Если вспомогательная линия включена, то есть тип не "прямоугольный", то приведенное выше определение стиля не будет работать. Причина в том, что после прочтения исходного кода этого компонента я обнаружил, что атрибут, описывающий вспомогательный стиль линии, является не объектом стиля, а объектом lineStyle, в официальном документе это не поясняется.
<Tooltip
crosshairs={{
type: "y"
lineStyle: {
stroke: 'red', // 辅助线颜色
lineWidth: 4, // 辅助线宽度，单位为px
opacity: 1 // 辅助线透明度
}
}}
/>
Кажется, что первое желание усопшего легко исполнилось, и слишком жестоко было так убить видение? Вот и все, вперед и исполнить его последнее желание.
Второе пожелание — изменить стиль всплывающей подсказки. Поскольку вы хотите изменить стиль всплывающей подсказки, вы должны продолжать начинать с компонента «Подсказка». Почитав документацию, я обнаружил, что в ней тоже есть атрибут itemTpl, то есть шаблон всплывающей подсказки можно определить через этот атрибут
// 定义一个模板
// name-value是相关柱子的key-value值
const tooltipsDisplayTpl = `
<p class="chart-tooptip">
<span class="chart-tooptip-right">{name}</span>
<span>{value}</span>
</p>
`;
/*
// 重写tooltip元素的样式
// 因为视觉已死，样式是随便搞的，就弄点黑色背景当默哀一下吧
.g2-tooltip {
background-color: rgba(44, 49, 68, 0.80) !important;
}
.chart-tooptip {
margin: 0;
color: white;
}
.chart-tooptip-right {
margin-right: 12px;
}
*/
<Tooltip
crosshairs={ false }
itemTpl={ tooltipsDisplayTpl }
showTitle={ false } // 去头（标题，即横轴对应的刻度），往往影响我颜值的不是我的身材，而是我的脸，所以不要脸了
/>
примечание: если вы хотите настроить содержимое, отображаемое подсказкой, вам также необходимо установить свойство tooltip компонента Geom, то есть сопоставить данные с объектом Tooltip; поэтому, если значение этого свойства равно false, данные отсутствуют. будет передан компоненту Tooltip (на данный момент Tooltip).Отображаться будет только заголовок); его также можно установить в строку для отображения поля данных, соответствующего строке; Но, не суть, дело это то, что его можно настроить
// 定义数据返回的格式，name属性对应的是itemTpl里面的同名变量
const getTooltipData = (xAxis, yAxis) => {
return {
name: xAxis,
value: yAxis
};
}
<Geom
type="interval"
position="xAxis*yAxis"
tooltip={["xAxis*yAxis", getTooltipData]}
/>
Второе желание тоже исполнилось, и я почувствовал себя чуть более виноватым! Главное, что когда я пишу код, я всегда чувствую, что кто-то стоит позади меня и смотрит на меня.
Может быть, у вас не будет этого ощущения, если все ваши последние желания исполнятся, поэтому продолжим с третьим последним желанием: "изменить цвет столбца при наведении мыши на столбец", перерыл весь документ, и обнаружил, что есть нет интерфейса о наведении! Кажется, зрение умирает, аминь.
Как только я почувствовал, что моя спина становится холоднее, я обнаружил, что компонент Geom имеет активное свойство
Документ действительно описывает эти два предложения, и в нем нет примера. Могу только попробовать волну неотложной помощи, поставь true, давай, при наведении столбца цвет столбца меняется! ! !
<Geom
type="interval"
position="xAxis*yAxis"
tooltip={["xAxis*yAxis", getTooltipData]}
active={ true }
/>
Что делать, если вам нужно настроить стиль столбца наведения мыши? Попробовал еще раз с атрибутом select документа Geom.
<Geom
type="interval"
position="xAxis*yAxis"
tooltip={["xAxis*yAxis", getTooltipData]}
style={{ cursor: 'pointer' }} // 鼠标hover上去的时候，显示小手手，免费送的
active={[
true,
{
style: {
fill: 'black', // 柱子颜色，继续默哀
shadowColor: 'red', // 整体阴影颜色，包括边缘
shadowBlur: 1, // 阴影的透明度
opacity: 0 // 柱子颜色透明度
}
}
]}
/>
(духовно) «Собака, не умирай, я сделал это».
"Блин, я уже два дня притворяюсь мертвым, ты смеешь быть медленнее?"
«В официальном документе есть строка слов: я могу только понять, но не могу выразить словами! Мой талант ограничен, и я понял это давно».
«Эй, смотри, еще одна ошибка! Твои часы мерцают».
(задыхаясь и энергично трясясь) "Этот ТМ не жук!!!"
Но с учетом того, что при обновлении данных переключение со старых данных на новые будет очень резким, процесса буферизации нет, и смотреть на это особенно неудобно. Думаю добавить анимацию при обновлении данных! Но начальная анимация действует, а анимация обновления не действует (если официалы знают решение, не стесняйтесь, просветите меня). Так как я торопился уйти с работы, то решил использовать DataSet: артефакт для управления табличными данными.Говорят, что при обновлении данных он выдаст мне анимацию (помимо этого есть такие функции как легкий импорт не-json данных и т.д., вот некоторые Например, я подробно не изучал конкретные детали, и я поделюсь ими позже, после изучения). Это не просто, но это остро!
// 安装
// npm install @antv/data-set
// 引入
import DataSet from '@antv/data-set';
// 生成一个View实例，作为类的属性，故不要在render方法里面生成这个实例
dv = new DataSet().createView();
render() {
this.dv.source(data);
<Chart
height={ 400 }
data={ this.dv }
forceFit
></Chart>
}
«Обезьяна, 6! У тебя есть поздний перекус? Мой»
"Хоть я и не очень голоден, но другое дело, пожалуйста, иди"
После того, как съел ведро лапши быстрого приготовления...
"Обезьяна, смотри, я тоже ужинал..."
"Что ты хочешь сделать снова..."
Он просто полон похоти! ! !
«Я просто думаю, что цвет колонки можно изменить, чтобы продукция нашей компании выглядела лучше»
"Собака, тебя можно побить?"
(жалко) "Можете ли вы добавить градиент после избиения..."
"..."
«Я знал, что ты лучший для меня, я буду хлопать тебя по спине и сжимать твои бедра~»
"Уходите"
<Geom
type="interval"
position="xAxis*yAxis"
tooltip={["xAxis*yAxis", getTooltipData]}
color={['xAxis', '#3DA4FF-#FFFFFF']}
/>
(хватая меня за шею и энергично встряхивая) "Я хочу градиент сверху вниз, а не слева направо"
"Не... не... щипай... я... меняюсь... меняюсь..."
<Geom
type="interval"
position="xAxis*yAxis"
tooltip={["xAxis*yAxis", getTooltipData]}
color={['xAxis', 'l(90) 0:#3DA4FF 1:#FFFFFF']}
/>
примечание: l относится к линейному градиенту, 90 относится к 90 градусам поворота (то есть градиент сверху вниз, судьи могут попробовать еще несколько поз, аххх, попробовать еще несколько углов)
Значения цвета, откалиброванные с помощью 0 и 1, указывают начальное значение цвета и конечное значение цвета.Обратите внимание, что значение цвета не может использовать имена цветов, такие как «красный», «синий» и т. д.
Можно добавить несколько значений градиента, например
color="l(90) 0:#000000 0.5:#FFFFFF 1:#000000"
примечание: если это тип области Geom, то первый метод градиента не работает, можно использовать только второй
"Собака, мне действительно нужно уйти с работы"
«Ну, вы видите, что вы делаете градиенты, или вы хотите сделать волну классификации цветов»
"Нет разговоров, до свидания!"
"Ужин мой"
"Ломать себе легкие и пытаться одурачить меня лапшой быстрого приготовления!!!"
"Как струна, вру тебе, что я собака"
"эммммммм..."
Раз уж мы упомянули классификацию цветов, давайте поговорим о dv.transform, у dv.transform есть несколько встроенных функций: filter, map, pick, rename, reverse... Вы можете проверить это сами.Документация
Вам нужно только добавить поле groupBy и добавить соответствующее поле classify к входящим необработанным данным, и вы можете легко это сделать.
dv.transform({
groupBy: ['classify'], // 以classify字段进行分组
});
«Обезьяна, цвет еще нужно настроить».
(белые глаза)
<Geom
position={'xAxis*yAxis'}
color={['classify', classify => {
// 这里根据不同字段返回不同颜色
return classify === 'test' ? 'red' : 'yellow';
}]}
style={{ cursor: 'pointer' }}
/>
Как ответственный интерфейсный наборщик, даже если дизайн этого не требует, мне все равно нужно объяснить, что значение масштаба горизонтальной оси можно настроить
<Axis
name={xAxis}
label={{
textStyle: {
fill: 'red', // 颜色
textBaseline: 'top' // 对齐基线
},
formatter: (val) => {
return `${ val }\n换行了`
}
}}
/>
"Собака, иди на вертел!!!"
"Хотите съесть лапшу быстрого приготовления????"
Собака, пешка!
Суммировать
Спасибо, что прочитали мой бред.Что нужно исправить, так это то, что наши программисты ладят с визуальными и интерактивными дизайнерами очень дружно и гармонично. Приведенное выше резюме предназначено только для справки и обучения.Если вам это не нравится, не распыляйте его.Если есть какие-либо ошибки или упущения, пожалуйста, поправьте меня.
@Author: beidan, PaperCrane