javascript - hightchart 折线图和柱形图，线不以图表开头

Question

这是我的jsFiddle，你可以看到黑线从列中心开始，

如何在条形开始处出现黑线并将其结束到条形结束？

如下图。

这是一个看起来很简单的任务，但尽一切努力去做，但现在正在工作。

我尝试通过添加添加数据值[-1,7.6]

见代码::

{ name: 'Temperature', type: 'line', data: [[-1,7.0], 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6], tooltip: { valueSuffix: '°C' }, step: 'center', rangeSelector: { selected: 0 } 但它在 xAxis 上显示“-1”参见图片

请帮忙 ：（

Answer 1

这个要求很复杂，使用这个步骤。

1>使用格式化程序删除xAxis中的-1和12

2>禁用xAxis的十字准线（我更新为false）

3>为点-1和12添加假列系列。

4>禁用假系列传奇。

5>使用格式化程序为所有系列的特定点禁用工具提示（从这个SO帖子中得到想法）。

Highcharts.chart('container', {
  chart: {
    zoomType: 'xy'
  },
  title: {
    text: 'Average Monthly Temperature and Rainfall in Tokyo'
  },
  subtitle: {
    text: 'Source: WorldClimate.com'
  },
  xAxis: [{
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
      'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
    ],
    crosshair: false,
    labels: {
      formatter: function() {
        if (this.pos != -1 && this.pos != 12) {
          return this.value
        }
      }
    }
  }],
  yAxis: [{ // Primary yAxis
    labels: {
      format: '{value}°C',
      style: {
        color: Highcharts.getOptions().colors[1]
      }
    },
    title: {
      text: 'Temperature',
      style: {
        color: Highcharts.getOptions().colors[1]
      }
    }
  }, { // Secondary yAxis
    title: {
      text: 'Rainfall',
      style: {
        color: Highcharts.getOptions().colors[0]
      }
    },
    labels: {
      format: '{value} mm',
      style: {
        color: Highcharts.getOptions().colors[0]
      }
    },
    opposite: true
  }],
  tooltip: {
    shared: true,

    formatter: function() {
      if (this.points[0].point.noTooltip == false) {
        return false
      } else {
        var points = this.points;
        var pointsLength = points.length;
        var tooltipMarkup = pointsLength ? '<span style="font-size: 10px">' + points[0].key + '</span><br/>' : '';
        var index;

        for (index = 0; index < pointsLength; index += 1) {

          if (index == 0) {
            tooltipMarkup += '<span style="color:' + points[index].series.color + '">\u25CF</span> ' + points[index].series.name + ': <b>' + points[index].y + ' mm</b><br/>';
          } else {
            tooltipMarkup += '<span style="color:' + points[index].series.color + '">\u25CF</span> ' + points[index].series.name + ': <b>' + points[index].y + '°C</b><br/>';
          }

        }

        return tooltipMarkup;
      }
    }

  },
  legend: {
    layout: 'vertical',
    align: 'left',
    x: 120,
    verticalAlign: 'top',
    y: 100,
    floating: true,
    backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
  },
  plotOptions: {
    series: {

      marker: {
        enabled: false
      }
    },
    column: {
      stacking: 'normal',
      dataLabels: {
        enabled: false,
      },
      pointPadding: -0.3,
    }
  },
  series: [{
    name: 'Rainfall',
    type: 'column',
    yAxis: 1,
    data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
    tooltip: {
      valueSuffix: ' mm'
    }

  }, {
    name: 'Temperature',
    type: 'line',
    data: [{
      x: -1,
      y: 7.0,
      noTooltip: false
    }, 7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6, {
      x: 12,
      y: 9.6,
      noTooltip: false
    }],
    tooltip: {
      valueSuffix: '°C'
    },
    step: 'center',
    rangeSelector: {
      selected: 0
    }
  }, {
    name: 'Rainfall',
    type: 'column',
    yAxis: 1,
    color: "#fff",
    data: [{
      x: -1,
      y: 50,
      noTooltip: false
    }, {
      x: 12,
      y: 55,
      noTooltip: false
    }],
    tooltip: {
      valueSuffix: ' mm'
    },
    showInLegend: false,
  }]
});

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>