时间戳

首页 > 解决方案 > 如何在Highchart上仅使用json对象（无js功能）更改系列（分组柱形图）的颜色？

javascript - 如何在Highchart上仅使用json对象（无js功能）更改系列（分组柱形图）的颜色？

问题描述

我实际上使用了一个名为 Jedox 的工具，它允许我使用 Highchart.js 库来制作图表。所以我尝试制作一个包含 2 个系列和 4 个列的简单图表，它是一个分组柱形图（聚集条形图）。我在 Highchart 上看到可以使用数组“colors”更改系列的颜色，但是当我使用它时它不起作用。为什么 ？我也尝试使用 colorByPoint，它可以工作，但这不是我想要的，因为它为类别着色，但在类别中有不同的系列，我希望每个系列都有精确的颜色。我怎样才能做到这一点 ？

在您看到代码之前，这里有一些精确性：我将“未定义”放在颜色属性上，因为无法删除这些属性，所以我将它们放入默认值。通常，当值设置为“未定义”时，颜色对应于“颜色”数组中的一种颜色。

在帮助我之前你必须知道的一件重要的事情：我不能使用 JS，我只能使用 JSON，仅此而已。

这是我的代码：（它只是一个json）

"chart": {
    "type": "column",
    "zoomType": "xy",
    "borderRadius": 0,
    "events": {},
    "height": 300,
    "width": 400,
    "backgroundColor": "#FFFFFF",
    "borderWidth": 1,
    "borderColor": "#D8D8D8",
    "plotBackgroundColor": null,
    "plotBorderWidth": 0,
    "plotBorderColor": "#000100",
    "spacingTop": 20
  },
  "plotOptions": {
    "series": {
      "minPointLength": 1,
      "dataLabels": {
        "enabled": false,
        "inside": false,
        "rotation": 0,
        "x": 0,
        "y": 0,
        "style": {
          "fontFamily": "Arial",
          "fontSize": 9,
          "color": "#366092",
          "fontWeight": "normal",
          "fontStyle": "regular"
        }
      },
      "cursor": null,
      "point": {
        "events": {}
      }
    }
  },
  "legend": {
    "symbolRadius": 0,
    "backgroundColor": null,
    "borderWidth": 0,
    "borderColor": "#000100",
    "itemStyle": {
      "fontFamily": "Arial",
      "fontWeight": "normal",
      "fontSize": "11px",
      "color": "#445862",
      "fontStyle": ""
    },
    "floating": false,
    "align": "center",
    "verticalAlign": "bottom",
    "layout": "horizontal",
    "reversed": false
  },
  "title": {
    "text": null
  },
  "series": [
    {
      "name": "Expected",
      "data": [
        1,
        5
      ],
      "color": "undefined",
      "id": 0,
      "property": "dcColumnClustered",
      "type": "column",
      "yAxis": 0,
      "zIndex": 2,
      "borderWidth": 0,
      "dataLabels": {
        "enabled": false
      }
    },
    {
      "name": "Current",
      "data": [
        2,
        3
      ],
      "color": "undefined",
      "id": 1,
      "property": "dcColumnClustered",
      "type": "column",
      "yAxis": 0,
      "zIndex": 2,
      "borderWidth": 0,
      "dataLabels": {
        "enabled": false
      }
    }
  ],
  "xAxis": [
    {
      "id": "x_0",
      "axtype": "xAxis",
      "labels": {
        "enabled": true,
        "style": {
          "fontFamily": "Arial",
          "fontWeight": "normal",
          "fontSize": "11px",
          "color": "#445862",
          "fontStyle": ""
        },
        "autoRotation": false
      },
      "categories": [
        "col1",
        "col2"
      ],
      "title": {
        "style": {
          "fontFamily": "Arial",
          "fontWeight": "normal",
          "fontSize": "11px",
          "color": "#445862",
          "fontStyle": ""
        },
        "text": ""
      },
      "tickInterval": null,
      "minorTickInterval": null,
      "gridLineWidth": 0,
      "minorGridLineWidth": 0,
      "reversed": false,
      "reversedStacks": false
    }
  ],
  "yAxis": [
    {
      "id": "y_0",
      "axtype": "yAxis",
      "opposite": false,
      "labels": {
        "enabled": true,
        "style": {
          "fontFamily": "Arial",
          "fontWeight": "normal",
          "fontSize": "11px",
          "color": "#445862",
          "fontStyle": ""
        },
        "autoRotation": false
      },
      "gridLineWidth": 1,
      "gridLineColor": "#D8D8D8",
      "title": {
        "text": "",
        "style": {
          "fontFamily": "Arial",
          "fontWeight": "normal",
          "fontSize": "11px",
          "color": "#445862",
          "fontStyle": ""
        }
      },
      "tickInterval": null,
      "minorTickInterval": null,
      "reversed": false,
      "reversedStacks": true
    }
  ],
  "tooltip": {
    "enabled": true
  },
  "colors": [
    "#FF0000",
    "#0000FF"
  ]

这是我的小提琴 这是我想要达到的目标

标签： javascriptjsonhighchartsjedox

解决方案

默认颜色值是undefined，而不是字符串"undefined"。（如果 Jedox 不允许未定义的值，请null改为使用）

    "series": [{
            "color": undefined,
            ...
        },
        {
            "color": undefined,
            ...
        }
    ]

现场演示： https ://jsfiddle.net/BlackLabel/zocj5a0b/

API 参考： https ://api.highcharts.com/highcharts/series.column.color

推荐阅读