Question

我使用areaspline（忽略柱形图）收到了图表的模型：

我有两个问题似乎无法找到满足要求的任何配置。

有没有办法根据趋势斜率将线条延伸到图形的边缘，或者可能只是略高于或低于终点？在这样的图形上，省略那些边缘线看起来并不坏，但是在同一区域中仅有3个数据点的图形上，空白区域更加明显。
我的y轴标签互相踩踏，但在这种情况下我似乎找不到隐藏第一个标签（$ 0）的方法。除了隐藏文本元素本身之外，还有配置吗？

修改：以下是我的配置示例：

var themeColors = {
    primaryColor: '#067bc2',    //dark blue
    secondaryColor: '#6a61a7',  //dark purple
    tertiaryColor: '#5ccadc',   //turquoise
    darkGray: '#37383e',        //dark gray
    mediumGray: '#919aa2',      //medium gray
    mediumLightGray: '#c9d3dc', //medium blue gray
    lightGray: '#eaf1f8',       //light blue gray (hover color)
    primaryRed: '#e54443',
    secondaryRed: '#e54443',
    primaryGreen: '#2bbb2d',
    secondaryGreen: '#2bbb2d',
    primaryOrange: '#ffa883',   //peach
    primaryBackground: '#fafcfe',//light blue
    secondaryBackground: '#ffffff',
    primaryText: '#37383e',     //dark gray
    secondaryText: '#919aa2',   //medium gray
    selectedColor: '#f5fafd'    //light blue, slightly darker than background
};

var colors = [
  themeColors.secondaryColor,
  themeColors.tertiaryColor,
  themeColors.primaryOrange
];

(function renderChart(series) {
  var options = {
    chart: {
      height: 400,
      spacing: [0,0,0,0],
      type: 'areaspline',
    },
    colors: colors,
    credits: { enabled: false },
    legend: {
      align: 'left',
      itemStyle: {
        color: themeColors.secondaryText,
        fontSize: '12px',
        fontWeight: 'normal',
      },
      margin: 30,
      symbolHeight: 14,
      symbolRadius: 0,
      symbolWidth: 14,
    },
    plotOptions: {
      areaspline: {
        marker: {
          fillColor: themeColors.secondaryBackground,
          lineColor: null,
          lineWidth: 2,
          radius: 3,
          symbol: 'circle',
        }
      }
    },
    title: { text: null },
    xAxis: {
      categories: ['first', 'second', 'third'],
      crosshair: {
        color: Highcharts.color(themeColors.lightGray).setOpacity(.5).get('rgba'),
        width: 12
      },
      labels: {
        style: {
          color: themeColors.secondaryText,
          fontSize: '12px'
        }
      },
      lineColor: themeColors.lightGray,
      tickColor: themeColors.lightGray,
      tickWidth: 0,
    },
    yAxis: {
      gridLineColor: themeColors.lightGray,
      labels: {
        align: 'left',
        step: 2,
        style: {
          color: themeColors.secondaryText,
          fontSize: '12px'
        },
        x: 0,
        y: 12,
      },
      lineColor: themeColors.lightGray,
      tickColor: themeColors.lightGray,
      title: { text: null },
    },
  };

  series.forEach((s,i)=>{
    s.fillColor = {
      linearGradient: {
        x1: 0,
        y1: 0,
        x2: 0,
        y2: 1
      },
      stops: [
        [0, Highcharts.color(colors[i]).setOpacity(0.1).get('rgba')],
        [1, Highcharts.color(colors[i]).setOpacity(0).get('rgba')]
      ]
    };
  });

  options.series = series;

    Highcharts.chart('container',options);
})([
    { name: 'a', data:[1,4,2] },
  { name: 'b', data:[3,1,2] }
]);

jsFiddle：https://jsfiddle.net/mtowj6ng/

谢谢！

Answer 1

您可以设置轴的最小值和最大值。

xAxis: {
  categories: ['first', 'second', 'third'],
  min: 0.5,
  max: 1.5,

如果您有3个类别，则轴范围将为0 - 2，因此您可以增加最小值并减少最大值0.5（类别的中间值）。

您也可以通过在图表加载时使用xAxis.update更新xAxis来动态执行此操作。

    chart: {
      events: {
        load: function () {
          const min = Math.min.apply(null, this.series[0].xData)
          const max = Math.max.apply(null, this.series[0].xData)

          this.xAxis[0].update({
            min: min + 0.5,
            max: max - 0.5
          })
        }
      }
    },

您也可以在渲染图表之前执行此操作。

将yAxis.showFirstLabel设为false。

示例：https://jsfiddle.net/bbd3pu9j/

Areaspline：边对边线并隐藏第一个y标签

1 个答案: