在前端开发中，Highcharts 是一款非常流行的图表库，它可以快速地创建各种类型的图表，并且提供了丰富的配置选项。而 GraphQL 则是一种用于 API 的查询语言，它可以帮助我们更加灵活地获取数据。本文将介绍如何在 GraphQL 中实现 Highcharts 查询，并提供一些最佳实践。
基础知识
在开始之前，我们需要了解一些基础知识。
Highcharts 基础
Highcharts 是一款基于 JavaScript 的图表库，它提供了各种类型的图表，包括线图、柱状图、饼图等等。我们可以通过配置选项来设置图表的样式、数据来源等等。以下是一个简单的 Highcharts 示例：
// javascriptcn.com 代码示例
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Monthly Average Rainfall'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
title: {
text: 'Rainfall (mm)'
}
},
series: [{
name: 'Tokyo',
data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0,
135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}, {
name: 'New York',
data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0,
104.3, 91.2, 83.5, 106.6, 92.3]
}]
});这个示例创建了一个柱状图，数据来源是两个城市的月平均降雨量。我们可以通过修改配置选项来设置不同的图表类型、样式和数据来源等等。
GraphQL 基础
GraphQL 是一种用于 API 的查询语言，它可以帮助我们更加灵活地获取数据。通过 GraphQL，我们可以定义一个查询，然后服务器会返回与之匹配的数据。以下是一个简单的 GraphQL 查询示例：
query {
user(id: "123") {
name
email
}
}这个查询请求服务器返回 id 为 "123" 的用户的姓名和邮箱。我们可以通过修改查询来获取不同的数据。
在 GraphQL 中实现 Highcharts 查询
现在我们已经了解了 Highcharts 和 GraphQL 的基础知识，接下来我们将介绍如何在 GraphQL 中实现 Highcharts 查询。
定义查询
首先，我们需要定义一个查询，用于获取 Highcharts 数据。以下是一个示例查询：
// javascriptcn.com 代码示例
query {
chart(type: String!, data: [ChartData!]!, title: String!, xAxis: XAxis!, yAxis: YAxis!, series: [Series!]!) {
type
data
title
xAxis {
categories
}
yAxis {
title
}
series {
name
data
}
}
}
input ChartData {
name: String!
data: [Float!]!
}
input XAxis {
categories: [String!]!
}
input YAxis {
title: String!
}
input Series {
name: String!
data: [Float!]!
}这个查询定义了一个名为 "chart" 的查询，它需要以下参数：
type：图表类型，例如 "line"、"column" 等等。data：图表数据，一个包含多个ChartData对象的数组。title：图表标题。xAxis：x 轴配置，一个包含categories数组的XAxis对象。yAxis：y 轴配置，一个包含title字符串的YAxis对象。series：数据系列，一个包含多个Series对象的数组。
其中 ChartData、XAxis、YAxis 和 Series 都是输入类型，它们分别定义了图表数据的格式。
实现查询
接下来，我们需要在服务器端实现这个查询。我们可以使用任何支持 GraphQL 的后端技术，例如 Node.js、Java、Python 等等。以下是一个简单的 Node.js 实现示例：
// javascriptcn.com 代码示例
const { graphql, buildSchema } = require('graphql');
const Highcharts = require('highcharts');
const schema = buildSchema(`
type Query {
chart(type: String!, data: [ChartData!]!, title: String!, xAxis: XAxis!, yAxis: YAxis!, series: [Series!]!): Chart
}
type Chart {
type: String
data: [ChartData]
title: String
xAxis: XAxis
yAxis: YAxis
series: [Series]
}
type ChartData {
name: String
data: [Float]
}
type XAxis {
categories: [String]
}
type YAxis {
title: String
}
type Series {
name: String
data: [Float]
}
`);
const root = {
chart: ({ type, data, title, xAxis, yAxis, series }) => {
const chartData = {
chart: {
type
},
title: {
text: title
},
xAxis: xAxis,
yAxis: yAxis,
series: series
};
Highcharts.chart('container', chartData);
return chartData;
}
};
const query = `
query {
chart(type: "column", data: [
{ name: "Tokyo", data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] },
{ name: "New York", data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3] }
], title: "Monthly Average Rainfall", xAxis: { categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"] }, yAxis: { title: "Rainfall (mm)" }, series: [
{ name: "Tokyo", data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] },
{ name: "New York", data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3] }
]) {
type
data {
name
data
}
title
xAxis {
categories
}
yAxis {
title
}
series {
name
data
}
}
}
`;
graphql(schema, query, root).then(result => {
console.log(result);
});这个示例使用了 Node.js 和 Highcharts 库来实现查询。首先，我们定义了一个 GraphQL schema，包含了我们之前定义的查询和类型。然后，我们实现了查询的逻辑，它会创建一个 Highcharts 图表，并返回图表的数据。最后，我们使用 graphql 函数来执行查询，并将结果打印到控制台。
最佳实践
在实现 Highcharts 查询时，有一些最佳实践可以帮助我们更加方便地使用 Highcharts 和 GraphQL。
使用变量
我们可以使用变量来传递查询参数，例如图表类型、数据和配置选项等等。以下是一个使用变量的示例：
// javascriptcn.com 代码示例
query ChartQuery($type: String!, $data: [ChartData!]!, $title: String!, $xAxis: XAxis!, $yAxis: YAxis!, $series: [Series!]!) {
chart(type: $type, data: $data, title: $title, xAxis: $xAxis, yAxis: $yAxis, series: $series) {
type
data {
name
data
}
title
xAxis {
categories
}
yAxis {
title
}
series {
name
data
}
}
}
input ChartData {
name: String!
data: [Float!]!
}
input XAxis {
categories: [String!]!
}
input YAxis {
title: String!
}
input Series {
name: String!
data: [Float!]!
}这个查询使用了变量来传递查询参数。我们可以在执行查询时传递变量，例如：
// javascriptcn.com 代码示例
const variables = {
type: "column",
data: [
{ name: "Tokyo", data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] },
{ name: "New York", data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3] }
],
title: "Monthly Average Rainfall",
xAxis: { categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"] },
yAxis: { title: "Rainfall (mm)" },
series: [
{ name: "Tokyo", data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] },
{ name: "New York", data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3] }
]
};
graphql(schema, query, root, null, variables).then(result => {
console.log(result);
});使用 Fragments
我们可以使用 Fragments 来重用查询的一部分。例如，我们可以定义一个包含图表数据的 Fragment，然后在多个查询中重用它。以下是一个使用 Fragments 的示例：
// javascriptcn.com 代码示例
fragment ChartDataFragment on ChartData {
name
data
}
query ChartQuery {
chart(type: "column", data: [
...ChartDataFragment
], title: "Monthly Average Rainfall", xAxis: { categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"] }, yAxis: { title: "Rainfall (mm)" }, series: [
{ name: "Tokyo", data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] },
{ name: "New York", data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3] }
]) {
type
data {
...ChartDataFragment
}
title
xAxis {
categories
}
yAxis {
title
}
series {
name
data
}
}
}这个查询使用了一个名为 ChartDataFragment 的 Fragment，它包含了图表数据的格式。我们可以在查询中使用 ...ChartDataFragment 来重用这个 Fragment。
总结
在本文中，我们介绍了如何在 GraphQL 中实现 Highcharts 查询，并提供了一些最佳实践。通过使用 GraphQL，我们可以更加灵活地获取数据，并且可以使用 Highcharts 来快速创建各种类型的图表。如果你正在开发一个前端应用程序，那么这个技术组合可能会对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/657808c5d2f5e1655d1ddfdc