Question

所以我正在寻找一种方法让我的图表上的一条线不平滑而另一条线条平滑。有一个主选项可以使图表上的每一行都平滑，但不是我知道的特定行。

这是我的图表 PS。我正在使用JQ Plots http://www.jqplot.com/index.php

这是我的JS代码。

//STOCK HIGH VS LOW

var line1 = [['2017-11-27',175.0800],['2017-11-28',174.8700],['2017-11-29',172.9200],['2017-11-30',172.1400],['2017-12-01',171.6700],['2017-12-04',172.6200],['2017-12-05',171.5200],['2017-12-06',170.2047],['2017-12-07',170.4400],['2017-12-08',171.0000],['2017-12-11',172.8900],['2017-12-12',172.3900],['2017-12-13',173.5400],['2017-12-14',173.1300],['2017-12-15',174.1700],['2017-12-18',177.2000],['2017-12-19',175.3900],['2017-12-20',175.4200],['2017-12-21',176.0200],['2017-12-22',175.4240],['2017-12-26',171.4700],['2017-12-27',170.7800],['2017-12-28',171.8500],['2017-12-29',170.5900],['2018-01-02',172.3000],['2018-01-03',174.5500],['2018-01-04',173.4700],['2018-01-05',175.3700],['2018-01-08',175.6100],['2018-01-09',175.0600],['2018-01-10',174.3000],['2018-01-11',175.4900],['2018-01-12',177.3600],['2018-01-16',179.3900],['2018-01-17',179.2500],['2018-01-18',180.1000],['2018-01-19',179.5800],['2018-01-22',177.7800],['2018-01-23',179.4400],['2018-01-24',177.3000],['2018-01-25',174.9500],['2018-01-26',172.0000],['2018-01-29',170.1600],['2018-01-30',167.3700],['2018-01-31',168.4417],['2018-02-01',168.6200],['2018-02-02',166.8000],['2018-02-05',163.8800],['2018-02-06',163.7200],['2018-02-07',163.4000],['2018-02-08',161.0000],['2018-02-09',157.8900]];

 var line2 = [['2017-11-27',173.3400],['2017-11-28',171.8600],['2017-11-29',167.1600],['2017-11-30',168.4400],['2017-12-01',168.5000],['2017-12-04',169.6300],['2017-12-05',168.4000],['2017-12-06',166.4600],['2017-12-07',168.9100],['2017-12-08',168.8200],['2017-12-11',168.7900],['2017-12-12',171.4610],['2017-12-13',172.0000],['2017-12-14',171.6500],['2017-12-15',172.4600],['2017-12-18',174.8600],['2017-12-19',174.0900],['2017-12-20',173.2500],['2017-12-21',174.1000],['2017-12-22',174.5000],['2017-12-26',169.6790],['2017-12-27',169.7100],['2017-12-28',170.4800],['2017-12-29',169.2200],['2018-01-02',169.2600],['2018-01-03',171.9600],['2018-01-04',172.0800],['2018-01-05',173.0500],['2018-01-08',173.9300],['2018-01-09',173.4100],['2018-01-10',173.0000],['2018-01-11',174.4900],['2018-01-12',175.6500],['2018-01-16',176.1400],['2018-01-17',175.0700],['2018-01-18',178.2500],['2018-01-19',177.4100],['2018-01-22',176.6016],['2018-01-23',176.8200],['2018-01-24',173.2000],['2018-01-25',170.5300],['2018-01-26',170.0600],['2018-01-29',167.0700],['2018-01-30',164.7000],['2018-01-31',166.5000],['2018-02-01',166.7600],['2018-02-02',160.1000],['2018-02-05',156.0000],['2018-02-06',154.0000],['2018-02-07',159.0685],['2018-02-08',155.0300],['2018-02-09',150.2400]];



var plot2 = $.jqplot('chart1', [line1, line2], {
    title: 'AAPL High vs Low',
    seriesDefaults: {
        rendererOptions: {
            //////
            // Turn on line smoothing.  By default, a constrained cubic spline
            // interpolation algorithm is used which will not overshoot or
            // undershoot any data points.
            //////
            smooth: true
        }
    },
    legend: { show: true },
    axes: {
        xaxis: {
            renderer: $.jqplot.DateAxisRenderer,
            tickOptions: { formatString: '%b %#d, %#I %p' },
            min: 'November 20 2017',
            tickInterval: '1 month'
        }
    },
     highlighter: {
    show: true,
    sizeAdjust: 7.5
  },

    canvasOverlay: {
            show: true,
            objects: [
                {horizontalLine: {
                    name: 'average',
                    y: 171.21, //**AVERAGE_FLOAT_VALUE**
                    lineWidth: 2,
                    color: '#FF5555',
                    shadow: false
                }}
            ]
        },

    series: [{ lineWidth: 4,
        markerOptions: { style: 'square' }

    }],
    series: [
            { label: 'High' },
            { label: 'Low' }
    ],
});

如果无法在JQ Plots中完成，你们知道其他任何图表都可以做到这一点。

我正在寻找最终看起来像这样的图表。

Answer 1

免责声明：我在互联网上阅读。。。但显然d3可以做到这一点（https://gist.github.com/thiyagu-p/3925981）。此外，如果你谷歌'd3移动平均线和音量'，你会得到一些有趣的结果。 YMMV。

Answer 2

我不了解jqPlot但你肯定可以用RGraph做到这一点：

https://www.rgraph.net/demos/svg-line-trading.html

如果您想要背面的灰色装饰条，您可以使用另一个条形图来获得此效果，然后绘制折线图并为其提供一些虚拟数据：

[1,0,1,0,1,0,1,0,1,0,1,0,1,0,1]

Answer 3

有点迟才回复。是的，您也可以在jqplot中执行此操作。与其直接使用seriesDefaults选项，不如直接将其添加到所需的每个系列中：

series: [
      {
        // custom line
        lineWidth:2, 
        markerOptions: { style:'diamond' }
      },
      { 
        // here is your smooth line
        rendererOptions: {
         smooth: true,
        },
        markerOptions: { style:"circle" }
      }
]

如何使一条线平滑而另一条线不在图表上？

3 个答案: