我在我的應用程式中使用氣泡圖。代碼如下：
https://stackblitz.com/edit/angular-bubblechart
<h1 style="text-align:center">Angular中的Polar圖表</h1>。
<div id="container"></div>
從'@angular/core'匯入 { Component, VERSION ,OnInit }。
從'highcharts'中匯入*作為Highcharts。
宣告 var require: any;
const More = require('highcharts/highcharts-more')。
More(Highcharts)。
const Exporting = require('highcharts/modules/exporting');
Exporting(Highcharts)。
const ExportData = require('highcharts/modules/export-data');
ExportData(Highcharts)。
const Accessibility = require('highcharts/modules/accessibility');
Accessibility(Highcharts)。
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css' ] 。
})
出口類AppComponent實作OnInit{
public options: any = {
圖表。{
type: 'bubble',
plotBorderWidth: 1,
zoomType: 'xy
},
圖例。{
enabled: false
},
標題。{
text: '每個國家的糖和脂肪攝入量
},
可訪問性: {
點: {
valueDescriptionFormat: '{index}. {point.name}, fat: {point.x}g, sugar: {point.y}g, obesity: {點.Z}%。
}
},
xAxis: {
gridLineWidth: 1,
標題。{
text: 'Daily fat intake
},
標簽。{
格式。'{值}克'
},
plotLines: [{
color: 'black',
dashStyle: 'dot',
寬度: 2,
值：65。
標簽。{
旋轉。0,
y: 15,
風格。{
fontStyle: 'italic
},
文本：'安全脂肪攝入量為65克/天
},
zIndex: 3
}],
可及性: {
rangeDescription: '范圍。60到100克'。
}
},
yAxis: {
startOnTick: false,
endOnTick: false,
標題。{
text: 'Daily sugar intake
},
標簽。{
格式。'{值}克'
},
maxPadding: 0.2,
plotLines: [{
color: 'black',
dashStyle: 'dot',
width: 2,
值：50。
標簽。{
align: 'right',
風格。{
fontStyle: 'italic
},
text: '安全糖攝入量50克/天',
x: -10
},
zIndex: 3
}],
可訪問性: {
rangeDescription: '范圍。0到160克'。
}
},
tooltip: {
useHTML: true,
headerFormat: '<table>'。
pointFormat: '<tr><th colspan="2"><h3>{point.country}</h3></th></tr> '
'<tr><th>脂肪攝入量：</th><td>{point.x}g</td></tr>' '<tr><th></tr></tr>'
'<tr><th>糖的攝入量:</th><td>{point.y}g</td></tr>' '<tr><th><td></tr>'
'<tr><th>肥胖（成人）：</th><td>{point.z}%</td></tr>' 。
footerFormat。'</table>'。
followPointer: true
},
plotOptions: {
系列。{
dataLabels: {
enabled: true,
格式。'{point.name}'
}
}
},
系列。[{
資料。[
{ x: 95, y: 95, z: 13.8, name: 'BE', country: ' Belgium' },
{ x: 86.5, y: 102.9, z: 14.7, name: 'DE', country: 'Germany' },
{ x: 80.8, y: 91.5, z: 15.8, name: 'FI', country: 'Finland' },
{ x: 80.4, y: 102.5, z: 12, name: 'NL', country: 'Netherlands' },
{ x: 80.3, y: 86.1, z: 11.8, name: 'SE', country: 'Sweden' },
{ x: 78.4, y: 70.1, z: 16.6, name: 'ES', country: 'Spain' },
{ x: 74.2, y: 68.5, z: 14.5, name: 'FR', country: 'France' },
{ x: 73.5, y: 83.1, z: 10, name: 'NO', country: 'Norway' },
{ x: 71, y: 93.2, z: 24.7, name: 'UK', country: 'United Kingdom' },
{ x: 69.2, y: 57.6, z: 10.4, name: 'IT', country: 'Italy' },
{ x: 68.6, y: 20, z: 16, name: 'RU', country: 'Russia' },
{ x: 65.5, y: 126.4, z: 35.3, name: 'US', country: 'United States' },
{ x: 65.4, y: 50.8, z: 28.5, name: 'HU', country: 'Hungary' },
{ x: 63.4, y: 51.8, z: 15.4, name: 'PT', country: 'Portugal' },
{ x: 64, y: 82.9, z: 31.3, name: 'NZ', country: 'New Zealand' }.
]
}]
}
建構式() { }
ngOnInit(){
Highcharts.chart('container', this.options)。
}
}
我想在螢屏的頂部有兩個下拉選單，這樣如果用戶從下拉選單中選擇任何值，氣泡圖就會相應地改變。我試著到處找，但沒有得到任何關于如何實作它的例子。下拉選單中顯示的資料將以ts檔案中的陣列形式出現。我怎樣才能做到這一點呢？
uj5u.com熱心網友回復：
我認為這將幫助你。請看看這個 下拉選單和圖表的腳本
var data = [
['data4', 'data2', 'data3'],
[90, 120, 300],
[40, 160, 240],
[50, 200, 290],
[120, 160, 230],
[80, 130, 300],
[90, 220, 320]
];
$(function () {
// 初始圖表
var chart = c3.generate({
資料。{
rows: data,
type: 'bar
}
});
// 根據選擇的選項重新繪制圖表
$("#chartType").change(function (evt) {
var chartSelection = $("#chartType").val();
var chart = c3.generate({
data: {
rows: data,
type: chartSelection
}
});
});
});
在html中
<select id="chartType">
<option value="bar">bar chart</option>
<option value="area">面積圖</option>
<option value="line">線圖</option>
<option value="spline">spline圖表</option>
</select>
<div id="chart"></div>
uj5u.com熱心網友回復：
我準備了一個基本的演示，你可以看到如何更新圖表，這取決于在選擇中設定的值。你應該能夠根據你的需要復制它。
演示。https://jsfiddle.net/BlackLabel/1pzxt79a/
API。https://api.highcharts.com/class-reference/Highcharts.Series#update
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/323550.html
標籤：