javascript - Extending linearea chart lines to chart edges - Stack Overflow

admin管理员组

文章数量:1332377

I'm working on a custom-styled line/area chart, based on this reference image:

I have most implemented, but, I'm struggling with the lines getting extended to the edges of the chart.

Here is my fiddle: ,output

As you can see in the image, the first point, the last point on X axis has a ray extending to the end of the chart, where in my fiddle there is no such thing.

I've been digging through the API, docs for quite some time now, but cannot find any relevant information.

How would I achieve such behavior?

I'm working on a custom-styled line/area chart, based on this reference image:

I have most implemented, but, I'm struggling with the lines getting extended to the edges of the chart.

Here is my fiddle: http://jsbin./ePilePe/3/edit?js,output

As you can see in the image, the first point, the last point on X axis has a ray extending to the end of the chart, where in my fiddle there is no such thing.

I've been digging through the API, docs for quite some time now, but cannot find any relevant information.

How would I achieve such behavior?

• javascript
• svg
• charts
• highcharts

Share Improve this question Follow asked Aug 27, 2013 at 11:09 tomsseisumstomsseisums 13.4k2020 gold badges8888 silver badges148148 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

After a little bit of fiddling around, I hacked my way around Highcharts to get the desired effect.

Here is my fiddle: http://jsbin./upUFIbO/1/.

What I did, is, add the following as callback for load and redraw events:

/**
 * Helper that extends area and lines to the left and right plot edges.
 *
 * Has to be invoked with .call(), giving Highchart as the this reference
 * and Highchart event as the second parameter.
 * 
 * @return void
 */
var edgeExtend = function(e)
{
  for (var l = this.series.length, i = 0; i< l; i++)
  {
    // Get current series.
    var series = this.series[i];

    // Get inner-chart box.
    var box = this.plotBox;

    // Take areas path.
    var areaPath = series.areaPath;

    // Add start point.
    // Right after the first element (M).
    areaPath.splice(1, 0, 0, areaPath[2], 'L');

    // Add Last points upper area end.
    // Remove penultimate point.
    // Replace it with a new point reaching to the width of chart and growing to the height of last element.
    // And add the bottom-right corner.
    areaPath.splice(-6, 3, 'L', box.width, areaPath[areaPath.length - 7], 'L', box.width, box.height);

    // Make the last points X be zero - that will result in bottom left corner.
    areaPath[areaPath.length - 2] = 0;

    // Replace value (redraw).
    series.area.element.attributes.d.value = areaPath.join(' ');

    var graphPath = series.graphPath;

    // Add start point.
    // Right after the first element (M).
    graphPath.splice(1, 0, 0, graphPath[2], 'L');

    // Add end point.
    graphPath.push('L', box.width, graphPath[graphPath.length - 1]);

    series.graph.element.attributes.d.value = graphPath.join(' ');
  }
};

Might be that this is no the best way to do it, but hey, you cannot go wrong with direct vector path manipulations.

If anyone has a more "user-friendly" solution to the problem, I'd like to see it.

My earlier ment missed the fact that this is a categorized axis.

In that case, I would simply affect the min and max. If you have a set number of categories, you can set this explicitly (in this case, min=0.5, max=5.5).

If they are dynamic, you can easily calculate them:

var cats=['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
var xMin = 0.5;
var xMax = (cats.length -1.5);

full example:

• http://jsfiddle/jlbriggs/Q46B8/

If you are not using a categorized axis, you can follow the advice in my original ment:

add minPadding:0 and maxPadding:0 to the xAxis properties. If your data does not end on a tickmark, then you will also want to add startOnTick:false and endOnTick:false

Don't use categories for such case - categories will prevent that behavior. For example use linear axis with label formatter, see: http://jsbin./EcupIPO/1/

var cat = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];

$("#chart").highcharts({
  xAxis : {
    labels :{ 
      formatter: function () {
        return cat[this.value];
      }
    } 
  }
});

本文标签： javascriptExtending linearea chart lines to chart edgesStack Overflow