Question

在HighCharts的v5 +下，我们可以选择使用2个版本。一个版本就像v4及以下版本一样，其中样式和图表逻辑被包裹在一起。另一个版本是v5的新版本，其中样式在CSS中处理，逻辑在javascript中处理，如前所述。我们目前正在使用＆＃34; old＆＃34;版。但是，现在我们需要包含一些模式填充功能（如here所示）。这迫使我们使用CSS版本。但是，这个CSS版本打破了我们为彩色主题设置图表选项的能力，正如我们一直在做的那样：

$('#plain').click(function () {
    chart.update({
        colors: ['rgb(40,97,152)', 'rgb(57,114,169)', 'rgb(65,122,177)', 'rgb(74,131,186)', 'rgb(82,139,194)', 'rgb(90,147,202)', 'rgb(99,156,211)', 'rgb(107,164,219)', 'rgb(116,173,228)', 'rgb(124,181,236)', 'rgb(133,190,245)', 'rgb(141,198,253)', 'rgb(150,207,255)', 'rgb(158,215,255)', 'rgb(167,224,255)', 'rgb(175,232,255)', 'rgb(184,241,255)', 'rgb(192,249,255)', 'rgb(201,255,255)'],
        chart: {
            inverted: false,
            polar: false
        },
        subtitle: {
            text: 'Plain'
        }
    });
});

可测试路径 - 点击＆＃34; plain＆＃34;底部的按钮。条形应变为蓝色。工作（不使用CSS版本）：jsFiddle

不工作（使用CSS版本）：jsFiddle

在CSS版本下执行此操作的可接受方法是什么？我们目前在＆＃34; old＆＃34;中做了很多事情。我们在.NET中构建HighCharts javascript代码的版本，其中包含许多依赖于某些参数（文本字符串长度，图表尺寸，点值等）的样式。我担心的是，我现在不得不将大量的排列编码到CSS文件中。还应注意，我们在页面上有多个图表，并非所有图表都需要应用相同的样式。

我们对模式填充的另一个选择是使用plugin，但它在3年内没有被更新（由HighCharts dev编写，所以很好）。

Answer 1

样式模式中颜色数组的等价物是.highcharts-color-{n} css类与chart.colorCount属性相结合。

css：

.highcharts-color-0 {
  fill: rgb(40,97,152);
  stroke: rgb(40,97,152);
}

...

.highcharts-color-11 {
  fill: rgb(141,198,253);
  stroke: rgb(141,198,253);
 }

JS：

var chart = Highcharts.chart('container', {
  chart: {
    colorCount: 12
  },

要获得与非样式模式完全相同的效果，您需要从Highcharts css覆盖一些css规则。

.highcharts-point {
  stroke-width: 0
}

最好的选择是创建自己的css文件或覆盖默认的Highcharts css。

示例：http://jsfiddle.net/pugshon6/

如果查看模式插件源代码，有关于上次修订日期的信息 - 2016-10-05，所以插件不应该过时。

Answer 2

我在新的Highcharts中遇到了相同的“功能”，我也希望在JavaScript中保持不同的风格。

因此，在深入了解Highcharts代码后，我发现它根据提供的颜色索引生成类名（默认情况下，它使用0-9颜色索引和这些索引的类）。

所以我为数据系列"colorIndex": 55指定了假颜色索引，而highcharts相应地生成了类.highcharts-data-label-color-55。这解决了这个问题！现在JS颜色的填充属性wins超过假css类，除非你定义.highcharts-data-label-color-55： - ）

E.g。我的热图数据：

"series": [
  {
    "data": [...],
    "type": "heatmap",
    "dataLabels": {
      enabled: true,
      color: '#000000'
    },
    "colorIndex": 55
  }
],

E.g。我的饼图数据：

"series": [
          {
            data: [
              {
                name: 'N 1',
                colorIndex: 55,
                y: 10
              },
              {
                name: 'N 2',
                colorIndex: 55,
                y: 20
              },
              {
                name: 'N 3',
                colorIndex: 55,
                y: 30
              },
              {
                name: 'N 4',
                colorIndex: 55,
                y: 40
              },
            ]
          }
        ],

使用样式化HighCharts版本时更新图表颜色

2 个答案: