javascript - 如何使用 Highcharts/Highstock 制作不规则缩放的 x 轴并绘制到其两侧

Question

我想用 Highcharts/Highstock 制作一个看起来像这样的图表（对不起，糟糕的图表；））：

我已经知道如何做列和行。我找不到（或不可能）的是：

• 如何在 x 轴的两侧有列和线？ 编辑：我想手动和静态地设置刻度点之间的距离！
• 如何拥有一个不仅不规则，而且只显示一些带有描述的点的 x 轴？

编辑：这是我现在想出的：http: //jsfiddle.net/pJEER/唯一缺少的是给列一个单独的宽度（不是它们的任何东西x: 2-4），并根据动态为它们着色他们的价值！

非常感谢您！

Answer 1

您可以使用 tickPositioner http://api.highcharts.com/highcharts#xAxis.tickPositioner和序数为 false：http ://api.highcharts.com/highstock

Answer 2

没有直接的答案，但有一些建议：

• 要制作具有特定宽度的列，您需要将每一列放在不同的系列中
• 对于每一列，您可以使用data: [{ x: X, y:Y, color: specific_color}]. 因此，要根据值设置特定颜色，请通过添加属性来预处理您的数据color。

Answer 3

要根据其值格式化列，您可以使用一个小辅助函数，在该函数中根据输入值返回具有特定颜色的点对象。

function scatterDot(x, y, color){
  return {
    "x": x
  , "y": y
  , "color": color
  , "marker": { "fillColor": color, "states": { "hover": { "fillColor": color } } }
  };
}

对于动态绘图带，您还可以使用格式化程序函数来显示它，具体取决于它是否在特定范围内，从而使刻度位置灵活而不是预设。我为设置数据标签做了类似的事情。

dataLabels: {
  enabled: true,
  formatter: function() {
    if (this.percentage >= 0) {
      return this.key +"<br />"+ this.y+" ("+Math.round(this.percentage)+"%)";
    } else {
      return '';
    }
  }
}