如何解决用json格式的数据制作带有4个元素的数组的图表高图
json数据具有以下类型:
[["SSL Certificate Signed Using Weak Hashing Algorithm",4500,"98","10980"],["SSL Self-Signed Certificate",2000,"-1"],...]
我可以正确显示名称(第一个元素)和数值(第二个元素)。 我希望第三个和第四个元素与名称一起出现。 我还想根据第三个元素的值来区分不同颜色的条。这是可能的?我该怎么办?
这是我写的代码:
$(document).ready(function() {
var options = {
chart: {renderTo:'grafico1',type:'column'},series: [{ }] // Lascio vuoto
};
$.getJSON('json.json',function(data){
options.series[0].data = data;
var chart = new Highcharts.Chart(options);
});
});
解决方法
- 使用jQuery生成
category
数组和3个系列数组 - 您的第三个/第四个值不是数字,因此将对其进行解析。
我创建了这个jsFiddle并且可以正常工作,请检查以下内容:
https://jsfiddle.net/s87pg0ew/2/
javascript:
var myJsonData = [["SSL Certificate Signed Using Weak Hashing Algorithm",4500,"98","10980"],["SSL Self-Signed Certificate",2000,"-1"]];
var categories = [];
var value1 = [];
var value2 = [];
var value3 = [];
$.each(myJsonData,function( index,value ) {
categories.push(value[0]);
value1.push(value[1]);
value2.push(parseInt(value[2]));
value3.push(parseInt(value[3]));
});
Highcharts.chart('container',{
chart: {
type: 'bar'
},title: {
text: 'Test'
},subtitle: {
text: 'Test'
},xAxis: {
categories: categories,title: {
text: null
}
},yAxis: {
title: {
text: 'Test y axis',align: 'high'
},labels: {
overflow: 'justify'
}
},plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},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: "type1",data: value1
},{
name: "type2",data: value2
},{
name: "type3",data: value3
}]
});
,
您可以通过简单的方式使用array.map
功能来解析数据。
const mainData = [["SSL Certificate Signed Using Weak Hashing Algorithm","-1"]];
const categories = mainData.map(d => d[0]);
const data1 = mainData.map(d => d[1]);
const data2 = mainData.map(d => parseInt(d[2]));
const data3 = mainData.map(d => parseInt(d[3]));
演示:https://jsfiddle.net/BlackLabel/btv80h1q/
但是我认为这些操作应该在后端进行。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。