使用 json 格式的数据制作 highcharts 图表，带有 4 元素数组答案

【问题标题】：make highcharts graph with data in json format, with 4-element array使用 json 格式的数据制作 highcharts 图表，带有 4 元素数组
【发布时间】：2020-12-12 10:17:20
【问题描述】：

json 数据属于这种类型：

[["SSL Certificate Signed Using Weak Hashing Algorithm",4500,"98","10980"],["SSL Self-Signed Certificate",2000,"98","-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); 
 });
});

【问题讨论】：

标签： javascript jquery json charts highcharts

【解决方案1】：

使用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,"98","-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
    }]
});

【讨论】：

感谢您的回复！但这不是我想要实现的。我可能解释得很糟糕。我希望数组的第三个和第四个元素的值与第一个元素一起出现在标签中。然后我希望这些条具有不同的颜色，基于第三个元素的值。例如，一种颜色值为“98”的条形图和另一种颜色值为“99”的条形图。
@EpicBrozo96 也许你可以画一张图来展示你的例子，我们会得到它。

【解决方案2】：

您可以使用array.map 功能以简单的方式解析您的数据。

const mainData = [["SSL Certificate Signed Using Weak Hashing Algorithm",4500,"98","10980"],["SSL Self-Signed Certificate",2000,"98","-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/

但我认为这些操作应该在后端完成。

【讨论】：