这是我在 aspx 页面中使用的 HighCharts JS 代码：
Highcharts.chart('highcharts1', {
chart: {
type: 'bar'
},
title: {
text: 'Number of MSMEs By District',
align: 'left'
},
//subtitle: {
// text: 'Source: <a ' +
// 'href="https://en.wikipedia.org/wiki/List_of_continents_and_continental_subregions_by_population"' +
// 'target="_blank">Wikipedia.org</a>',
// align: 'left'
//},
xAxis: {
//categories: ['Africa', 'America', 'Asia', 'Europe'],
categories: JSON.parse(jsonDistrict),
title: {
text: null
},
gridLineWidth: 1,
lineWidth: 0
},
yAxis: {
min: 0,
title: {
text: 'Population (millions)',
align: 'high'
},
labels: {
overflow: 'justify'
},
gridLineWidth: 0
},
tooltip: {
valueSuffix: ' millions'
},
plotOptions: {
bar: {
borderRadius: '50%',
dataLabels: {
enabled: true
},
groupPadding: 0.1
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -40,
y: 80,
floating: true,
borderWidth: 1,
backgroundColor:
Highcharts.defaultOptions.legend.backgroundColor || '#FFFFFF',
shadow: true
},
credits: {
enabled: false
},
series: [{
name: 'Year 1990',
data: [631, 727, 3202, 721]
}, {
name: 'Year 2000',
data: [814, 841, 3714, 726]
}, {
name: 'Year 2018',
data: [1276, 1007, 4561, 746]
}]
});
我从 HighCharts 官方网站获取了这段代码，它显示了基于代码中提到的静态数据的图表，正如您可以看到的注释一样。现在我正在尝试实现相同的图表，但为 xAxis 类别以及系列数据生成动态数据。
我在后台有一个 CS 代码，它从 PLSQL 数据库获取地区名称并生成格式如下的 json ['ABC','XYZ','PQR']:
protected string BindDataToChart()
{
DataTable dt = objBO.Get_MSME_Chart_Data(new object[] { null });
List<string> districtName = new List<string>();
foreach(DataRow row in dt.Rows)
{
districtName.Add(row["DISTRICT_NAME"].ToString());
}
string jsonDistrict = JsonConvert.SerializeObject(districtName, Formatting.Indented);
return jsonDistrict;
}
但是，我无法发送在 CS 文件中生成的地区名称，并在我的 aspx 页面中的 JS 代码 xAxis 类别中附加相同的名称。在过去的两天里，我已经从官方 HighCharts 网站到 StackOverflow 浏览了一些在线资源，但我仍然没有成功。
我也以类似的方式获取计数，我想在 JS 代码系列数据中实现它。
抱歉我的英语不好，感谢您帮助我。
我已经为您创建了一个完整的功能示例。 这是“Default.aspx”页面：
<%@ Page Title="Home Page" Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebFormHighChart._Default" %>
<!DOCTYPE html>
<html lang="en">
<head runat="server">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title><%: Page.Title %> - My ASP.NET Application</title>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<style>
.highcharts-figure,
.highcharts-data-table table {
min-width: 360px;
max-width: 800px;
margin: 1em auto;
}
.highcharts-data-table table {
font-family: Verdana, sans-serif;
border-collapse: collapse;
border: 1px solid #ebebeb;
margin: 10px auto;
text-align: center;
width: 100%;
max-width: 500px;
}
.highcharts-data-table caption {
padding: 1em 0;
font-size: 1.2em;
color: #555;
}
.highcharts-data-table th {
font-weight: 600;
padding: 0.5em;
}
.highcharts-data-table td,
.highcharts-data-table th,
.highcharts-data-table caption {
padding: 0.5em;
}
.highcharts-data-table thead tr,
.highcharts-data-table tr:nth-child(even) {
background: #f8f8f8;
}
.highcharts-data-table tr:hover {
background: #f1f7ff;
}
</style>
</head>
<body>
<form runat="server">
<figure class="highcharts-figure">
<div id="highcharts1"></div>
</figure>
<script type="text/javascript">
Highcharts.chart('highcharts1', {
chart: {
type: 'bar'
},
title: {
text: 'Number of MSMEs By District',
align: 'left'
},
xAxis: {
categories: <%=JsonDistrict%>,
title: {
text: null
},
gridLineWidth: 1,
lineWidth: 0
},
yAxis: {
min: 0,
title: {
text: 'Population (millions)',
align: 'high'
},
labels: {
overflow: 'justify'
},
gridLineWidth: 0
},
tooltip: {
valueSuffix: ' millions'
},
plotOptions: {
bar: {
borderRadius: '50%',
dataLabels: {
enabled: true
},
groupPadding: 0.1
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -40,
y: 80,
floating: true,
borderWidth: 1,
backgroundColor:
Highcharts.defaultOptions.legend.backgroundColor || '#FFFFFF',
shadow: true
},
credits: {
enabled: false
},
series: [{
name: 'Year 1990',
data: [631, 727, 3202, 721]
}, {
name: 'Year 2000',
data: [814, 841, 3714, 726]
}, {
name: 'Year 2018',
data: [1276, 1007, 4561, 746]
}]
});
</script>
</form>
</body>
</html>
这是它背后的代码：
using Newtonsoft.Json;
using System;
using System.Collections.Generic;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace WebFormHighChart
{
public partial class _Default : Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected string BindDataToChart()
{
string jsonDistrict = "['Africa', 'America', 'Asia', 'Europe']";
return jsonDistrict;
}
public string JsonDistrict { get => BindDataToChart(); }
}
}
如您所见，我使用名为“JsonDistrict”的属性来填充 javascript 图表配置。您还可以定义一个 JS 变量，并以类似的方式将内容放入其中，然后根据需要使用它。