Question

无法从数据库中打印值。该值位于以下形式的json中： json
接下来是React的代码，它提取值：

componentDidMount() {
            axios.get("http://localhost:8086/query?pretty=true;db=cafe;q=select%20*%20from%20cafe")
            .then(json => json.data.results[0].series[0].values.map(result => (
                {
                    data: `${result[8]}`
                }
                )))
                .then(newData => this.setState({users: newData}))
                .catch(error => alert(error))
    }

接下来，我渲染所有这些，但是在将状态写入数组之前。在serius.data（第二个）中，我带来了价值。在“返回”中，我返回时间表本身：

render() {
    const {users}= this.state;
    console.log(users);

    var letData = {
        dataTim: this.state.jobs
    };

    var weather = {
        legend: {
            enabled: false,
            backgroundColor: null
        },
        title: {
            useHTML: true,
            align: "center",
            text: 'Температура / давление',
            style: {
                paddingLeft: "31px",
                paddingRight: "31px",
                textAlign: "center",
                width: "100%",
                height: "94px",
                backgroundColor: '#17171F',
                color: "white"
            }
        },
        marker: {
            fillColor: "#9D5198",
            lineWidth: 3,
            lineColor: "white"
        },
        subtitle: {
            text: 'погода',
            useHTML: true,
            align: "center",
            style: {
                textAlign: "center",
                backgroundColor: '#17171F',
                color: "#999999"
            }
        },
        yAxis: [{
            gridLineWidth: 0,
            labels: {
                format: '{value}°C',
                style: {
                    color: "white"
                }
            },
            title: {
                text: null
            },
        }, {
            gridLineWidth: 0,
            labels: {
                format: '{value} мм.',
                style: {
                    color: "white"
                }
            },
            title: {
                text: null
            },
        }

        ],
        xAxis: {
            categories:[ ["9:30"], ["10:00"], ["10:30"], ["11:00"], ["11:30"]],
            lineWidth: 0,
            crosshair: false,
            tickmarkPlacement: 'on',
            tickWidth: 1,
            labels: {

                align: 'right',
                x: 12,
                rotation: 0,
                style: {
                    cx: 10,
                    cy: 10,
                    r: 2,
                    color: "white"
                }
            },
        },
        labels: {
            style: {
                color: '#707073'
            }
        },
        chart: {
            style: {
                height: 520,
                fontFamily: 'Neris Light, arial'
            },
            backgroundColor: "#1B1C28"
        },
        plotOptions: {
            series: {
                marker: {
                    enabled: false,
                    fillColor: "black",
                    lineWidth: 1,
                    lineColor: "white"
                }
            }
        },
        credits: {
            enabled: false
        },
        series:
            [{
            name: 'Температура',
            yAxis: 0,
            type: 'areaspline',
            data: [762, 764, 358, 769, 242],
            fillColor: {
                linearGradient: {
                    x1: 0,
                    y1: 0,
                    x2: 0,
                    y2: 1
                },
                stops: [
                    [0, "#4C244E"],
                    [1, Highcharts.Color("#79398B").setOpacity(0.1).get('rgba')]
                ]
            },
            dashStyle: "Solid",
            lineWidth: 0

        }, {
            name: 'Давление',
            yAxis: 1,
            data: [users],
            type: 'areaspline',
            fillColor: {
                linearGradient: {
                    x1: 0,
                    y1: 0,
                    x2: 0,
                    y2: 1
                },
                stops: [
                    [0, "#892E51"],
                    [1, Highcharts.Color("#79398B").setOpacity(0.2).get('rgba')]
                ]
            },
            dashStyle: "Solid",
            lineWidth: 0
        }
        ]
    };

    return (
        <ReactHighcharts
            config={weather}
        >
        </ReactHighcharts>
    );

}}

我需要输出2张图形，但是此数据库不会显示。

输出到Highcharts。 image

Answer 1

尝试更改：

data: `${result[8]}`

到

data: parseInt(${result[8]})

Answer 2

请检查Highcharts所需的数据格式：https://api.highcharts.com/highcharts/series.line.data

您需要将data: `${result[8]}`更改为y: parseInt(${result[8]})

在Highcharts中的图表上显示值

2 个答案: