Официальный Highcharts + React, популяция серии из JSON?
У меня возникли проблемы с заменой текущего графика в проекте на Highcharts. Я использую NPM-пакеты highcharts-response-official (и highcharts), и он не отображает "все" из ответа.
Проект довольно большой, и, глядя на реализацию старой диаграммы, он кажется довольно простым с Rechart. Текущая выборка данных из ответа API выглядит примерно так (в оболочке ComposedChart):
data = {chartData}
Которая затем отображает все необходимые данные. Я надеялся, что это будет простой обмен и заполнение Highcharts таким же образом, но это было не так.
В методе возврата у меня это:
<HighchartsReact
highcharts = {Highcharts}
options = {options}
/>
И мои варианты в методе рендеринга у меня следующие:
const options = {
chart: {
events: {
load: function () {
console.info(JSON.stringify(chartData[2].value))
}
}
},
title: {
text: ''
},
series: {
name: 'test',
data: chartData
}
Такого рода работы. Журнал консоли печатает конкретное значение, но если я попробую его в серии, например data: chartData [2] .value, это не сработает. При использовании data: chartData он ДЕЙСТВИТЕЛЬНО отображает правильное количество записей из объекта в виде категорий (в данном случае 6 разных записей), но не более того. Это неправильно разбирается или в чем дело?
Спасибо!
-
Обновлено:
Хорошо, вот как это выглядит сейчас, и вроде как работает.
chart: {
events: {
load: () => {
this.state.testChart.map(data =>
testData.push({
name: data.time,
x: data.temp,
y: data.value
})
);
this.setState({ data: testData });
}
}
},
И в моей серии:
series: [{
type: 'column',
name: 'Current year',
data: testData
},
Визуальный результат состоит в том, что Highcharts добавляет все 6 объектов в массив, который мне дает ответ (показывает 6 категорий). Но не отображает никаких данных из этих 6 записей. Это выглядит примерно так:
[
{time: "2018-10-11", temp: "21", value: "10"},
{time: "2018-10-10", temp: "12", value: "31"}
]
В то же время, когда изменяется временной интервал (например, нажатие кнопки, чтобы показать предыдущую неделю, которая обрабатывает testChart вне HC), эти 6 записей (и, следовательно, категории в HC) изменяются, как и ожидалось. Так что это похоже на то, как мне нужно идти, но как мне сделать данные видимыми? Что мне не хватает?
Я попробовал быстро преобразовать их в ответ в методе testData.push, например x: Number (data.temp), что не помогло.
Привет, mtorn, не могли бы вы подготовить минимальный живой пример?
Я сделал быстрый пример, но он не работает полностью, но, возможно, вы его поняли. codeandbox.io/s/5m99q7nkp
Привет, mtorn, Спасибо за пример, теперь намного проще посмотреть на проблему. Вы не можете конвертировать данные в событии load, потому что они находятся до загрузки. Живая демонстрация: codeandbox.io/s/q3z4k1k9yw
Ооооо, я вижу! Ага, это больше похоже на это! Вы знаете, как я могу обновить вызов при нажатии на кнопку? Например, testChart уже извлекает данные из другого метода в скрипте и после щелчка по нему обновляет testChart новыми значениями. Но на данный момент Highcharts, похоже, не реагирует на обновление. Это потому, что он установлен внутри функции загрузки события и срабатывает только один раз?
Да, событие load срабатывает только один раз, вы можете прочитать о событиях диаграммы в API: api.highcharts.com/highcharts/chart.events Вот пример того, как вы можете получить данные и обновить диаграмму после нажатия кнопки: codeandbox.io/s/q3z4k1k9ywcodeandbox.io/s/q3z4k1k9yw
Ответы 1
Вероятно, вы пытаетесь создать график, когда данные еще не загружены. Взгляните на пример ниже, вы можете увидеть, как создать диаграмму с динамическими данными:
class App extends React.Component {
constructor(props) {
super(props);
}
componentDidMount() {
fetch("https://api.myjson.com/bins/q4us4")
.then(response => response.json())
.then(data => {
options.series[0].data = data;
this.setState({ data: data });
});
}
render() {
return (
<div>
{this.state &&
this.state.data && (
<Chart options = {options} highcharts = {Highcharts} ref = {"chart"} />
)}
</div>
);
}
}
render(<App />, document.getElementById("root"));
Живая демонстрация: https://codesandbox.io/s/mz35zwxjoj
Да, я придумал что-то в этом роде, но, похоже, это не помогает. Если я использую другой фиктивный JSON, он не заполнит диаграмму. См. Демонстрацию: codeandbox.io/s/n77117y1k0
Привет, mtorn, спасибо за пример, но он больше не работает. Я заметил, что у вас неправильный формат данных, посмотрите примеры в API: api.highcharts.com/highcharts/series.column.data
О, я вижу. Что ж, в этой ссылке тот же принцип, просто переключайтесь между ними. codeandbox.io/s/6xm89n36m3 Я понимаю, что это не сработает из коробки, но нужно ли мне сильно манипулировать ответом, чтобы он соответствовал формату данных, который хочет HC, или что мне нужно сделать?
Да, вам нужно преобразовать свой ответ в формат, требуемый Highcharts, например, таким образом: codeandbox.io/s/wwym42z1q7
Отлично, работает! Спасибо. Но я понял, что при текущей настройке приложения это не работает. Он не выполняет повторный рендеринг при получении новых данных, например, при переключении временного интервала. Я создам новый пост в этой теме с дополнительной информацией.
Я обновил первый пост, если вы не против взглянуть.
Привет, mtorn, Что касается вашего редактирования, значения в данных должны быть числами, а не строками.