jquery - 基于点击的动态高图系列
问题描述
是否可以让 highchart 显示一个动态数据库单击按钮?
我有一个资产数组
var assets = [{
name: "food",
type: [{
name: "a",
y: 129.2
}, {
name: "b",
y: 132
}]
}, {
name: "drink",
type: [{
name: "drink1",
y: 512,
}, {
name: "drink2",
y: 412,
}]
}];
我为将用作系列的高图设置了一个空数组
var data =[];
然后我设置按钮的标题就像每个类别的名称
<button title="food">show food</button>
<button title="drink">show drink</button>
密码笔
这是我第一次尝试显示动态数据,所以谢谢。
解决方案
是否可以让 highchart 显示一个动态数据库单击按钮?
是的,您可以这样做,在设置实际数据之前,您需要先依次设置空白数据,然后再设置实际数据。
演示
var assets = [{
name: "food",
type: [{
name: "a",
y: 129.2
}, {
name: "b",
y: 132
}]
}, {
name: "drink",
type: [{
name: "drink1",
y: 512,
}, {
name: "drink2",
y: 412,
}]
}],
colors = ['#76daff', '#b9f', '#99ffa6', '#ffc312'];
$('button').on('click', function() {
var attr = $(this).attr('title'),
obj = assets.find(({name}) => name === attr);
chart.series[0].setData([], true);
chart.series[0].setData(obj.type || [], true);
});
var chart = Highcharts.chart('highchart', {
chart: {
type: 'bar',
backgroundColor: null,
height: 270,
},
title: {
text: ''
},
xAxis: {
type: 'category',
labels: {
useHTML: true,
formatter: function() {
return '<div class="myToolTip" style="color:' + colors[this.pos % colors.length] + '">' + this.value + '</div>';
}
}
},
colors: colors,
yAxis: {
min: 0,
gridLineWidth: 0,
title: {
text: ''
},
gridLineWidth: 0,
labels: {
enabled: false
}
},
credits: {
enabled: false
},
legend: {
enabled: false
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
crop: false,
overflow: 'none',
format: '<span style="color:{point.color}">{y}</span>'
},
colorByPoint: true
}
},
tooltip: {},
series: [{}]
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="highchart"></div>
<button title="food">show food</button>
<button title="drink">show drink</button>
推荐阅读
- observable - 自定义 RxJava Observable 在订阅时不发出任何内容
- python - Python if-else 说明
- python - 网页涂鸦 - 使用 Python 抓取关键字并制作列表
- regex - 这个指令是什么意思
? - node.js - 将 Async/Await 与 node-postgres 一起使用
- sql - 执行 SQL Server 存储过程时出现语法错误
- android - 如何修复“Play商店无法识别'values-ne/strings.xml'文件中的字符串。”
- python - 生成 HMAC SHA256 签名 Python
- c# - Azure IoT Adge BLE 模块 - 用于 linux 容器的 BLE 实现
- reactjs - 在 axios 中发送 GET/POST 请求以在 React/Express 应用程序中接收 blob