当数据为 CSV 格式时，如何更改 Highcharts 柱形图中单列的颜色？答案

【问题标题】：How to change color of single column in Highcharts column graph when data is in CSV form?当数据为 CSV 格式时，如何更改 Highcharts 柱形图中单列的颜色？
【发布时间】：2019-07-17 19:23:03
【问题描述】：

我正在 Highcharts 中制作一个简单的条形图，并希望图表的所有列都是蓝色的，除了一个。当数据集中的数据位于数组中时，我发现如何通过在要更改的特定数据点上使用 {y:value, color:"color"} 来更改一列的颜色。但是，我的值是 CSV 格式的，这种技术不起作用。

我曾尝试使用用于数组的技术，即 {y:value, color:"color"} 在数据集中以各种方式无济于事。当数据为 CSV 格式时，我正在寻找执行此操作的正确方法。

这里是具体图表的链接：https://cloud.highcharts.com/show/B4SzUwwfY

这是它的代码的副本：

  "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"
  }
}

【问题讨论】：

具体列是怎么选的？我没有看到任何列表明某些值是特殊的。

标签： javascript highcharts

【解决方案1】：

在load 事件函数中，您可以在特定点上使用update 方法并更改颜色：

chart: {
    ...,
    events: {
        load: function() {
            var point = this.series[0].points[3];

            point.update({
                color: 'red'
            });
        }
    }
}

现场演示： http://jsfiddle.net/BlackLabel/4yz6Ln1m/

API 参考： https://api.highcharts.com/class-reference/Highcharts.Point#update

【讨论】：

这很棒。谢谢！