javascript - 带区域颜色填充和 y 轴的负色

标签 javascript highcharts

基础图表:

type: 'area',

https://jsfiddle.net/q3x9psdz/19/
但是当交叉值对于当前图表来说太大时 - yAxis 正在扩展:

  plotOptions: {
            series: {
                threshold: 20,
            }
        },
        xAxis: {
            type: 'datetime',
            tickPixelInterval: 50,
            crosshair: true,
        },
    yAxis: {
        plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            },
            {
                value: 20,
                color: 'coral',
                dashStyle: 'shortdash',
                width: 2,
            }
    ]}

https://jsfiddle.net/q3x9psdz/14/
解决方法是使用样条线或直线:

    series: [{
            type: 'spline',
        name: 'Chart',
        data: [[1523195126000,1],[1523195426000,3],[1523195726000,1],[1523196026000,2],[1523196326000,6],[1523196626000,5],[1523196926000,2],[1523197226000,3],[1523197526000,1]],
        negativeColor: true,
        color: '#FF4040',
        shadow: true

    }]

https://jsfiddle.net/q3x9psdz/23/
But on cros no area color:

plotOptions: {
        series: {
            threshold: 2.5,
        }
    },

https://jsfiddle.net/q3x9psdz/21/

有什么解决方案可以有颜色填充区域并且不扩展 yAxis?

最佳答案

设置series.softThresholdtrue

plotOptions: {
  series: {
    threshold: 20,
    softThreshold: true
  }
},

实例:https://jsfiddle.net/j58bvw36/

关于javascript - 带区域颜色填充和 y 轴的负色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49778350/

相关文章:

javascript - 动态 Controller 传递给 ng-template

javascript - Highcharts 中的轴标签对齐

javascript - 使用 python Flask 应用程序在 Heroku 上未显示 highcharts

javascript - 如何在 Highcharts/Highstocks 中选择列(跨多个 Pane )

javascript - 哪种创建特定尺寸 Canvas 的 jQuery 方法具有最佳性能?

javascript - 更改 HTML 表格中特定列的背景颜色

javascript - node.js 正则表达式分割字符串以发送到另一台服务器

javascript - if else 语句将图像大小传递给周围的 div

javascript - 是否可以在 Highcharts 中添加气泡大小的图例?

javascript - Highcharts 显示堆叠列总和始终位于顶部(甚至负数)