gpt4 book ai didi

javascript - highcharts动态使用插件grouped_categories

转载 作者:行者123 更新时间:2023-12-03 10:07:22 26 4
gpt4 key购买 nike

我尝试动态使用 HighCharts 插件: grouped_categories

此插件的良好 Json 格式是:

xAxis: {
categories: [{
name: "Fruit",
categories: ["Apple", "Banana", "Orange"]
}, {
name: "Vegetable",
categories: ["Carrot", "Potato", "Tomato"]
}, {
name: "Fish",
categories: ["Cod", "Salmon", "Tuna"]
}]

}

我使用this technic让我的 xAxis 动态化:

  • 在我的图表中我写:xAxis: {categories: []} 在我调用Json 的一部分 options.xAxis.categories = json[0]['data'];

所以我尝试了很多技术,但从来没有好的......

您有解决这个问题的想法吗?

非常感谢。

Geo-x

<小时/>

编辑1

这是我使用 AJAX 生成 JSON 后的代码

// -- Graphical options --
var options = {
chart: {
renderTo: 'graphique',
type : type_graph},
xAxis: {categories: []},
title: {text: ''},
tooltip: {
animation : true,
borderRadius : 15
},
plotOptions: {
line: {
allowPointSelect: true,
cursor: 'pointer',
groupPadding: 0.1,
states: {
hover: {
brightness: -0.3}}
},
column: {
allowPointSelect: true,
cursor: 'pointer'
}
}
,series: []
}

$.post(
"statistiques_data.php",
parametres_connexion,
function(json) {

// X AXIS --------------------------------------

options.xAxis.categories = json[0]['data'];

// DATA --------------------------------------

options.series[0] = json[1];

// LEGEND --------------------------------------

options.legend = {enabled : false,backgroundColor : '#FCFFC5'};

// LABELS --------------------------------------

switch (type_graph) {

///////////////////////////////
case 'line' :
///////////////////////////////

var dataSum = 0;
for (var i=0;i < json[1]['data'].length;i++) {
dataSum += json[1]['data'][i]
};
options.plotOptions.bar.dataLabels = {enabled:true,formatter:function() {var pcnt = (this.y / dataSum) * 100; return Highcharts.numberFormat(pcnt,2) + ' %';}};

options.xAxis.labels = {step: 1,style: {fontSize: '9px',fontFamily: 'Arial Bold, Arial, Verdana'}};

break;

///////////////////////////////
case 'column' :
///////////////////////////////

var dataSum = 0;
for (var i=0;i < json[1]['data'].length;i++) {
dataSum += json[1]['data'][i]
};
options.plotOptions.column.dataLabels = {enabled:true,formatter:function() {var pcnt = (this.y / dataSum) * 100; return Highcharts.numberFormat(pcnt,2) + ' %';}};

options.xAxis.labels = {
autoRotation: [-10,-20,-30,-40,-50,-60,-70,-80,-90],

step: 1,
style: {fontSize: '80%',fontFamily: 'Arial Bold, Arial, Verdana'}};

break;
}

// GRAPHIC

chart = new Highcharts.Chart(options);},
"json");
<小时/>

编辑2

我使用 PHP 代码生成 JSON:

[{name: "col1", categories: [{ name: "CITY1", categories: ["Not information", "Multiple", "type1"] }, { name: "CITY2", categories: ["Not information", "Type2"] }, { name: "CITY3", categories: ["Not information", "Type1","Type2"] }]} { name: "col2", categories: [1,6,1,3,1,2,1,9]}

但是现在如果我尝试用这个来生成我的图形,我没有结果:

以我的名字col1

options.xAxis.categories = json[0];

以我的名字col2

options.series[0] = json[1];

我的 json 导航出现错误,但我不知道错误在哪里

最佳答案

看了你的问题很长时间。相信我,我看了这个问题大约半个小时,您提供的 json 的名称和类别均为 string。但 Highcharts 使用字符串数字格式。将您的 json categories 更改为 number ,它将起作用。

关于javascript - highcharts动态使用插件grouped_categories,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30299703/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com