Javascript 不同的xAxis标签、最大值和颜色，用于在Highcharts中向下展开_Javascript_Highcharts

Javascript 不同的xAxis标签、最大值和颜色，用于在Highcharts中向下展开

javascript highcharts

Javascript 不同的xAxis标签、最大值和颜色，用于在Highcharts中向下展开,javascript,highcharts,Javascript,Highcharts,我有一个设置，用不同的数据集生成多个海图。我现在开始实现一个向下展开，它需要为xAxis设置不同的标签，max需要更改，我想为每个条设置颜色关于xAxis，我正在使用的对象获取向下钻取的数据对我来说似乎没有问题，但是没有使用名称，而是显示循环的I （5） [……] 0: {…} 数据：数组（5）[3,8,3，…] id:“dd1” 名字：“坏！” 类型：“列” 对于最大值，对于基本图表应该是5，但对于深入分析应该是未设置的，我尝试了向下展

我有一个设置，用不同的数据集生成多个海图。我现在开始实现一个向下展开，它需要为xAxis设置不同的标签，max需要更改，我想为每个条设置颜色

关于xAxis，我正在使用的对象获取向下钻取的数据对我来说似乎没有问题，但是没有使用名称，而是显示循环的I

（5） [……] 0: {…} 数据：数组（5）[3,8,3，…] id:“dd1” 名字：“坏！” 类型：“列”

对于最大值，对于基本图表应该是5，但对于深入分析应该是未设置的，我尝试了

向下展开：{ 亚克斯：{ 最高：100 } }

但它什么也没做

TBH我还没有尝试自己的颜色，预期的结果将是根据一周的质量对条进行着色，例如坏周=红色到奇妙=绿色

我还尝试为深入分析设置图表类型（现在我为每个数据对象设置'type'：'column'，这对我来说似乎是多余的，但我无法确定是否可以使用类似于…深入分析的内容。图表：{'type'：'column'}定义向下展开的常规设置，但这也不会显示任何结果

我尝试过使用绑定到charts.events.drilldown或plotoptions.series.points.events.click的函数实现几个设置示例，但我对Highcharts和JavaScript的知识非常有限，因此无法成功

代码：

//无法处理Object.Value（即不支持ES6）的浏览器的回退
如果（！Object.values）{
Object.values=函数（源）{
var result=Object.keys（源）.map（函数（x）{
返回源[x]；
});
返回结果；
};
}
//设置常规海图选项
变量选项={
图表：{
类型：'areaspline'
},
学分：{
已启用：false
},
图例：{
已启用：false
},
xAxis：{
类型：“类别”
},
亚克斯：{
标题：{
已启用：false
},
最多：5
},
系列：[{
填充颜色：{
线性梯度：{
x1:0，
y1:0，
x2:0，
y2:1
},
停止：[
[0，#F0A830']，
[1，#f4']
]
},
标记：{
fillColor:'白色'，
线宽：2，
线条颜色：'#F0A830'，
半径：5
},
线条颜色：'#F0A830'，
线宽：5，
}],
打印选项：{
系列：{
标记：{
启用：false，
符号：“圆圈”
}
}
},
向下展开：{
亚克斯：{
最高：100
},
图表：{
“类型”：“列”
},
钻孔按钮：{
主题：{
填充：“白色”，
“笔划宽度”：1，
笔划：“银牌”，
r:0，
国家：{
悬停：{
填写：“#a4edba”
},
选择：{
笔划：'#039'，
填写：“#a4edba”
}
}
}
}
}
};
//临时数据交付
var circlesData={
"0": {
“标题”：“我的团队”，
“值”：[4,3,2,3,4]，
“周”：[1,2,3,4,5]，
“周总数”：[6,7,8,9,10]，
“价值详情”：{
“valuesDetailLabel”：[“糟糕！”、“嗯”、“还好”、“漂亮”、“棒极了”]，
“valuesDetailData”：{
0: [3, 4, 4, 1, 15],
1: [2, 12, 5, 3, 1],
2: [18, 2, 2, 2, 2],
3: [3, 2, 4, 1, 5],
4: [1, 2, 1, 1, 15]
}
}
},
"1": {
“标题”：“您的团队”，
“值”：[1,4,5,2,3]，
“周”：[1,2,3,4,5]，
“周总数”：[6,7,8,9,10]，
“价值详情”：{
“valuesDetailLabel”：[“糟糕！”、“嗯”、“还好”、“漂亮”、“棒极了”]，
“valuesDetailData”：{
0: [3, 8, 3, 1, 4],
1: [3, 12, 4, 3, 1],
2: [4, 2, 2, 2, 2],
3: [3, 2, 4, 5, 8],
4: [1, 2, 1, 1, 15]
}
}
}
}
console.log（circlesData）；
var circlesDataString=JSON.stringify（circlesData）；//这只是将对象数组“info”转换为字符串
var obj=JSON.parse（circlesDataString）；
log（'加载已启动…'）；
//用于创建单个HighCharts的循环
Object.key（obj.forEach）（函数（项）{
//创建容器div
$（“#外部容器”）。附加（“”）；
//获取上一次迭代的数据，并确定上周颜色编码/文字的质量
var latestScore=circlesData[item].values.slice（-1）[0]；
log（'latestScore:'+latestScore）
var chartColor=''；
var weekText=''；
var className=''；
如果（最新分数<2.5）{
chartColor='#FD6E72'；
chartColorLight='#fc8385'；
weekText=‘糟糕的一周’；
}否则如果（最晚分数>=2.5&&最晚分数<3.5）{
chartColor='#FFCC73'；
chartColorLight='#FBD486'；
weekText=‘确定周’；
}否则{
chartColor='#2CCC76'；
chartColorLight='#82DB9D'；
weekText=‘美好的一周’；
}
//为第一个图表视图创建数组
var chartData=[]；
var len=circlesData[item].values.length；
对于（i=0；i// Fallback for browsers that cannot handle Object.values (i.e. that do not support ES6)
if (!Object.values) {
    Object.values = function(source) {
        var result = Object.keys(source).map(function(x) {
            return source[x];
        });
        return result;
    };
}

// Setting general HighCharts options
var options = {
    chart: {
        type: 'areaspline'
    },
    credits: {
        enabled: false
    },
    legend: {
        enabled: false
    },
    xAxis: {
        type: 'category'
    },
    yAxis: {
        title: {
            enabled: false
        },
        max: 5
    },
    series: [{
        fillColor: {
            linearGradient: {
                x1: 0,
                y1: 0,
                x2: 0,
                y2: 1
            },
            stops: [
                [0, '#F0A830'],
                [1, '#f4f4f4']
            ]
        },
        marker: {
            fillColor: 'white',
            lineWidth: 2,
            lineColor: '#F0A830',
            radius: 5
        },
        lineColor: '#F0A830',
        lineWidth: 5,
    }],
    plotOptions: {
        series: {
            marker: {
                enabled: false,
                symbol: 'circle'
            }
        }
    },
    drilldown: {
        yAxis: {
            max: 100
        },
        chart: {
            'type': 'column'
        },
        drillUpButton: {
            theme: {
                fill: 'white',
                'stroke-width': 1,
                stroke: 'silver',
                r: 0,
                states: {
                    hover: {
                        fill: '#a4edba'
                    },
                    select: {
                        stroke: '#039',
                        fill: '#a4edba'
                    }
                }
            }
        }
    }
};

// Temporary data delivery
var circlesData = {
    "0": {
        "title": "MyTeam",
        "values": [4, 3, 2, 3, 4],
        "weeks": [1, 2, 3, 4, 5],
        "weeksTotal": [6, 7, 8, 9, 10],
        "valuesDetail": {
            "valuesDetailLabel": ["Bad!", "Hmm", "Itwasokay", "Prettygood", "Fantastic"],
            "valuesDetailData": {
                0: [3, 4, 4, 1, 15],
                1: [2, 12, 5, 3, 1],
                2: [18, 2, 2, 2, 2],
                3: [3, 2, 4, 1, 5],
                4: [1, 2, 1, 1, 15]
            }
        }
    },
    "1": {
        "title": "YourTeam",
        "values": [1, 4, 5, 2, 3],
        "weeks": [1, 2, 3, 4, 5],
        "weeksTotal": [6, 7, 8, 9, 10],
        "valuesDetail": {
            "valuesDetailLabel": ["Bad!", "Hmm", "Itwasokay", "Prettygood", "Fantastic"],
            "valuesDetailData": {
                0: [3, 8, 3, 1, 4],
                1: [3, 12, 4, 3, 1],
                2: [4, 2, 2, 2, 2],
                3: [3, 2, 4, 5, 8],
                4: [1, 2, 1, 1, 15]
            }
        }
    }
}

console.log(circlesData);

var circlesDataString = JSON.stringify(circlesData); //this just turns the object array 'info' into a string

var obj = JSON.parse(circlesDataString);
console.log('Loading initiated...');

// Loop for creating individual HighCharts
Object.keys(obj).forEach(function(item) {
    // Create container div
    $('#outerContainer').append('<div class="innerContainer" id="circles' + item + '"></div>');

    // Get data of last iteration and determin quality of last week for color coding/wording
    var latestScore = circlesData[item].values.slice(-1)[0];
    console.log('latestScore: ' + latestScore)

    var chartColor = '';
    var weekText = '';
    var className = '';

    if (latestScore < 2.5) {
        chartColor = '#FD6E72';
        chartColorLight = '#fc8385';
        weekText = 'Bad week';
    } else if (latestScore >= 2.5 && latestScore < 3.5) {
        chartColor = '#FFCC73';
        chartColorLight = '#FBD486';
        weekText = 'Ok week';
    } else {
        chartColor = '#2CCC76';
        chartColorLight = '#82DB9D';
        weekText = 'Good week';
    }
    // create array for first chart view
    var chartData = [];
    var len = circlesData[item].values.length;
    for (i = 0; i < len; i++) {
        chartData.push({
            'name': 'w' + circlesData[item].weeks[i],
            'y': circlesData[item].values[i],
            'drilldown': 'dd' + circlesData[item].values[i]
        });
    };
    // set array for drilldown items
    var drillDown = [];
    for (i = 0; i < len; i++) {
        drillDown.push({
            'type': 'column',
            'id': 'dd' + circlesData[item].values[i],
            'data': circlesData[item].valuesDetail.valuesDetailData[i],
            'name': circlesData[item].valuesDetail.valuesDetailLabel[i]
        });
    };
    console.log('This is drillDown');
    console.log(drillDown);
    // Setting individual Highcharts options per Circle
    options.series[0] = {
        name: circlesData[item].title,
        data: chartData,
        color: chartColor,
        fillColor: {
            linearGradient: {
                x1: 0,
                y1: 0,
                x2: 0,
                y2: 1
            },
            stops: [
                [0, chartColor],
                [1, '#f4f4f4']
            ]
        },
    };
    // Set drilldown options
    options.drilldown.series = drillDown;
    options.title = {
        text: circlesData[item].title
    };
    options.subtitle = {
        text: weekText,
        style: {
            color: chartColor,
        }
    };
    console.log(options);

    // Call Highcharts
    $('#circles' + item).highcharts(options);
    console.log('Circle' + item + ' loaded...');
});


    // Fallback for browsers that cannot handle Object.values (i.e. that do not support ES6)
if (!Object.values) {
    Object.values = function(source) {
        var result = Object.keys(source).map(function(x) {
            return source[x];
        });
        return result;
    };
}

// Setting general HighCharts options
var options = {
    chart: {
        type: 'areaspline'
    },
  colors: ['#ED561B', '#DDDF00', '#24CBE5', '#058DC7', '#50B432'],
    credits: {
        enabled: false
    },
    legend: {
        enabled: false
    },
    xAxis: {
        type: 'category'
    },
    yAxis: {
        title: {
            enabled: false
        },
        max: 5
    },
    series: [{
        fillColor: {
            linearGradient: {
                x1: 0,
                y1: 0,
                x2: 0,
                y2: 1
            },
            stops: [
                [0, '#F0A830'],
                [1, '#f4f4f4']
            ]
        },
        marker: {
            fillColor: 'white',
            lineWidth: 2,
            lineColor: '#F0A830',
            radius: 5
        },
        lineColor: '#F0A830',
        lineWidth: 5,
    }],
    plotOptions: {
        series: {
            marker: {
                enabled: false,
                symbol: 'circle'
            }
        }
    },
    drilldown: {
        drillUpButton: {
            theme: {
                fill: 'white',
                'stroke-width': 1,
                stroke: 'silver',
                r: 0,
                states: {
                    hover: {
                        fill: '#a4edba'
                    },
                    select: {
                        stroke: '#039',
                        fill: '#a4edba'
                    }
                }
            }
        }
    }
};

// Temporary data delivery
var circlesData = {
    "0": {
        "title": "MyTeam",
        "values": [4, 3, 2, 3, 4],
        "weeks": [1, 2, 3, 4, 5],
        "weeksTotal": [6, 7, 8, 9, 10],
        "valuesDetail": {
            "valuesDetailLabel": ["Bad!", "Hmm", "Itwasokay", "Prettygood", "Fantastic"],
            "valuesDetailData": {
                0: [["Bad!",3], ["Hmm",4], ["Itwasokay",4], ["Prettygood",1], ["Fantastic",15]],
                1: [["Bad!",2], ["Hmm",12], ["Itwasokay",5], ["Prettygood",3], ["Fantastic",1]],
                2: [["Bad!",18], ["Hmm",2], ["Itwasokay",2], ["Prettygood",2], ["Fantastic",2]],
                3: [["Bad!",3], ["Hmm",2], ["Itwasokay",4], ["Prettygood",1], ["Fantastic",5]],
                4: [["Bad!",1], ["Hmm",2], ["Itwasokay",1], ["Prettygood",1], ["Fantastic",15]]
            }
        }
    },
    "1": {
        "title": "YourTeam",
        "values": [1, 4, 5, 2, 3],
        "weeks": [1, 2, 3, 4, 5],
        "weeksTotal": [6, 7, 8, 9, 10],
        "valuesDetail": {
            "valuesDetailLabel": ["Bad!", "Hmm", "Itwasokay", "Prettygood", "Fantastic"],
            "valuesDetailData": {
                0: [["Bad!",3], ["Hmm",8], ["Itwasokay",3], ["Prettygood",1], ["Fantastic",4]],
                1: [["Bad!",3], ["Hmm",12], ["Itwasokay",4], ["Prettygood",3], ["Fantastic",1]],
                2: [["Bad!",4], ["Hmm",2], ["Itwasokay",2], ["Prettygood",2], ["Fantastic",2]],
                3: [["Bad!",3], ["Hmm",2], ["Itwasokay",4], ["Prettygood",5], ["Fantastic",8]],
                4: [["Bad!",1], ["Hmm",2], ["Itwasokay",1], ["Prettygood",1], ["Fantastic",15]]
            }
        }
    }
}

console.log(circlesData);

var circlesDataString = JSON.stringify(circlesData); //this just turns the object array 'info' into a string

var obj = JSON.parse(circlesDataString);
console.log('Loading initiated...');

// Loop for creating individual HighCharts
Object.keys(obj).forEach(function(item) {
    // Create container div
    $('#outerContainer').append('<div class="innerContainer" id="circles' + item + '"></div>');

    // Get data of last iteration and determin quality of last week for color coding/wording
    var latestScore = circlesData[item].values.slice(-1)[0];
    console.log('latestScore: ' + latestScore)

    var chartColor = '';
    var weekText = '';
    var className = '';

    if (latestScore < 2.5) {
        chartColor = '#FD6E72';
        chartColorLight = '#fc8385';
        weekText = 'Bad week';
    } else if (latestScore >= 2.5 && latestScore < 3.5) {
        chartColor = '#FFCC73';
        chartColorLight = '#FBD486';
        weekText = 'Ok week';
    } else {
        chartColor = '#2CCC76';
        chartColorLight = '#82DB9D';
        weekText = 'Good week';
    }
    // create array for first chart view
    var chartData = [];
    var len = circlesData[item].values.length;
    for (i = 0; i < len; i++) {
        chartData.push({
            'name': 'w' + circlesData[item].weeks[i],
            'y': circlesData[item].values[i],
            'drilldown': 'dd' + circlesData[item].weeks[i]
        });
    };
    // set array for drilldown items
    var drillDown = [];
    for (i = 0; i < len; i++) {
        drillDown.push({
            'type': 'column',
            'id': 'dd' + circlesData[item].weeks[i],
            'data': circlesData[item].valuesDetail.valuesDetailData[i],
          'name':'w' + circlesData[item].weeks[i],
          'colorByPoint': true,
        });
    };
    console.log('This is drillDown');
    console.log(drillDown);
    // Setting individual Highcharts options per Circle
    options.series[0] = {
        name: circlesData[item].title,
        data: chartData,
        color: chartColor,
        fillColor: {
            linearGradient: {
                x1: 0,
                y1: 0,
                x2: 0,
                y2: 1
            },
            stops: [
                [0, chartColor],
                [1, '#f4f4f4']
            ]
        },
    };
    // Set drilldown options
    options.drilldown.series = drillDown;
    options.title = {
        text: circlesData[item].title
    };
    options.subtitle = {
        text: weekText,
        style: {
            color: chartColor,
        }
    };

  //do this conditionally
  if(options.drilldown) options.yAxis.max = null;

    console.log('option', options);

    // Call Highcharts
    $('#circles' + item).highcharts(options);
    console.log('Circle' + item + ' loaded...');
});