要将柱状图的起始点设定为0,您可以使用Application Insights的JavaScript SDK,并使用Chart.js库创建柱状图。下面是一个示例代码,演示如何使用AppInsights和Chart.js实现此目标:
// 引入 Application Insights SDK
import { ApplicationInsights } from '@microsoft/applicationinsights-web';
// 初始化 Application Insights
const appInsights = new ApplicationInsights({
config: {
instrumentationKey: 'YOUR_INSTRUMENTATION_KEY_GOES_HERE',
}
});
appInsights.loadAppInsights();
appInsights.trackPageView();
// 获取日志数据
const logs = appInsights.getLogs({
query: 'your_kusto_query_here',
timespan: 'PT1H' // 查询最近1小时的日志
}).then((result) => {
// 处理日志数据
const data = result.tables[0].rows.map((row) => {
return {
label: row[0], // 柱状图的标签
value: row[1] // 柱状图的值
};
});
// 创建柱状图的配置
const chartConfig = {
type: 'bar',
data: {
labels: data.map((d) => d.label),
datasets: [{
data: data.map((d) => d.value),
backgroundColor: 'rgba(75, 192, 192, 0.2)',
borderColor: 'rgba(75, 192, 192, 1)',
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true // 将起始点设定为0
}
}
}
};
// 创建柱状图
const chart = new Chart(document.getElementById('chart'), chartConfig);
}).catch((error) => {
console.error(error);
});
请将上述代码中的YOUR_INSTRUMENTATION_KEY_GOES_HERE
替换为您的Application Insights仪表板中的仪表板密钥。还要根据您的需求修改查询、时间范围和其他样式选项。
此示例使用Application Insights的JavaScript SDK获取日志数据,并使用Chart.js创建柱状图。在柱状图的配置中,通过scales.y.beginAtZero
选项将起始点设定为0。最后,将柱状图渲染到具有ID chart
的HTML元素中。
请注意,此示例仅提供了一个基本的框架,您可能需要根据您的具体需求进行进一步的自定义和调整。