Javascript 当数据为CSV格式时,如何更改Highcharts柱形图中单列的颜色?
我正在用Highcharts制作一个简单的条形图,希望图中的所有列都是蓝色的,只有一列除外。我发现,当数据集中的数据位于数组中时,如何通过在要更改的特定数据点上使用{y:value,color:“color”}来更改一列的颜色。但是,我的值是CSV格式的,这种技术不起作用 我曾尝试以各种方式在数据集中使用用于数组的技术,即{y:value,color:“color”},但都没有成功。我正在寻找正确的方法来做到这一点,当数据是在CSV格式 以下是指向特定图表的链接: 以下是其代码的副本:Javascript 当数据为CSV格式时,如何更改Highcharts柱形图中单列的颜色?,javascript,highcharts,Javascript,Highcharts,我正在用Highcharts制作一个简单的条形图,希望图中的所有列都是蓝色的,只有一列除外。我发现,当数据集中的数据位于数组中时,如何通过在要更改的特定数据点上使用{y:value,color:“color”}来更改一列的颜色。但是,我的值是CSV格式的,这种技术不起作用 我曾尝试以各种方式在数据集中使用用于数组的技术,即{y:value,color:“color”},但都没有成功。我正在寻找正确的方法来做到这一点,当数据是在CSV格式 以下是指向特定图表的链接: 以下是其代码的副本: "t
"title": {
"text": "Ranking"
},
"subtitle": {
"text": ""
},
"exporting": {},
"chart": {
"polar": false
},
"plotOptions": {
"series": {
"animation": false,
"states": {
"inactive": {}
}
}
},
"xAxis": {
"index": 0,
"isX": true
},
"yAxis": {
"index": 0
},
"series": [
{
"turboThreshold": 0,
"_colorIndex": 0,
"_symbolIndex": 0,
"type": "column"
}
],
"annotations": [],
"data": {
"csv": "\"Entidad Federativa\";\"IDD-Mex 2018 ajustado a 10\"\n\"Aguascalientes\";10\n\"Baja California\";5.59398491\n\"Baja California Sur\";4.05317227\n\"Campeche\";8.01039005\n\"Chiapas\";1.15462263\n\"Chihuahua\";2.18559243\n\"Ciudad de México\";8.11808497\n\"Coahuila \";9.459552\n\"Colima\";6.90986012\n\"Durango\";4.47116843\n\"Guanajuato\";8.3311538\n\"Guerrero\";0\n\"Hidalgo\";4.75098071\n\"Jalisco\";3.3524999\n\"México\";5.01473714\n\"Michoacán \";3.90996208\n\"Morelos\";0.08613278\n\"Nayarit\";8.88474972\n\"Nuevo León\";6.88061019\n\"Oaxaca\";0.80450639\n\"Puebla\";1.53056493\n\"Querétaro\";7.32162985\n\"Quintana Roo\";4.84243048\n\"San Luis Potosí\";4.35040285\n\"Sinaloa\";6.63553281\n\"Sonora\";4.77125446\n\"Tabasco\";3.16869854\n\"Tamaulipas\";5.4656673\n\"Tlaxcala\";2.95165746\n\"Veracruz\";0.65919776\n\"Yucatán\";8.62090825\n\"Zacatecas\";8.03275369",
"googleSpreadsheetKey": false,
"googleSpreadsheetWorksheet": false
},
"chartarea": {},
"plotarea": {},
"tooltip": {},
"credits": {},
"stockTools": {
"gui": {
"buttons": [
"simpleShapes",
"lines",
"crookedLines"
],
"enabled": false
}
},
"navigation": {
"events": {
"showPopup": "function(e){this.chart.indicatorsPopupContainer||(this.chart.indicatorsPopupContainer=document.getElementsByClassName(\"highcharts-popup-indicators\")[0]),this.chart.annotationsPopupContainer||(this.chart.annotationsPopupContainer=document.getElementsByClassName(\"highcharts-popup-annotations\")[0]),\"indicators\"===e.formType?this.chart.indicatorsPopupContainer.style.display=\"block\":\"annotation-toolbar\"===e.formType&&(this.chart.activeButton||(this.chart.currentAnnotation=e.annotation,this.chart.annotationsPopupContainer.style.display=\"block\")),this.popup&&(c=this.popup)}",
"closePopup": "function(){this.chart.annotationsPopupContainer.style.display=\"none\",this.chart.currentAnnotation=null}",
"selectButton": "function(e){var t=e.button.className+\" highcharts-active\";e.button.classList.contains(\"highcharts-active\")||(e.button.className=t,this.chart.activeButton=e.button)}",
"deselectButton": "function(e){e.button.classList.remove(\"highcharts-active\"),this.chart.activeButton=null}"
},
"bindingsClassName": "tools-container"
}
}
在
load
事件函数中,您可以在特定点上使用update
方法并更改颜色:
chart: {
...,
events: {
load: function() {
var point = this.series[0].points[3];
point.update({
color: 'red'
});
}
}
}
现场演示:
API参考:如何选择特定列?我没有看到任何列表明某些值是特殊的。这很好。非常感谢。