股票图表时间线按钮和日期字段与图表左对齐

Question

我需要指导来制作我的图表，如所附屏幕截图所示。为此，我一直在使用 HighCharts，但找不到合适的选项或配置来这样做。以下是我所需设计的屏幕截图：

我还将 fiddle link 附加到我用来实现这些设计要求的当前实现中。

HTML:

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<div id="container" style="height: 400px; min-width: 310px"></div>

JavaScript:

Highcharts.stockChart('container', {
  chart: {
    spacingLeft: 200,
  },
  navigator: {
    enabled: false
  },
  scrollbar: {
    enabled: false
  },
  title : {
    text : 'Activity'
  },
  rangeSelector: {
    allButtonsEnabled: true,
    buttons: [{
      type: 'month',
      count: 3,
      text: 'Daily',
      dataGrouping: {
        forced: true,
        units: [['day', [1]]]
      }
    }, {
      type: 'year',
      count: 1,
      text: 'Weekly',
      dataGrouping: {
        forced: true,
        units: [['week', [1]]]
      }
    }, {
      type: 'all',
      text: 'Monthly',
      dataGrouping: {
        forced: true,
        units: [['month', [1]]]
      }
    }],
    buttonTheme: {
      width: 60
    },
    selected: 2
  },
  legend: {
    enable: true,
    align: 'left',
    verticalAlign: 'top',
    layout: 'vertical',
    x: 0,
    y: 100
  },
  xAxis: {
    type: 'datetime',
    dateTimeLabelFormats: {
      month: '%e. %b',
      year: '%b'
    }
  },
  series: [{
    name: 'Label 1',
    color: "#00aade",
    data: [[1501545600000, 5], [1504224000000,4], [1506816000000, 6],[1509494400000,5]]
  },
  {
    name: 'Label 2',
    color: "#8cc63e",
    data: [[1501545600000, 1], [1504224000000,0], [1506816000000, 2],[1509494400000,0]]
  }]
});

如果有人可以指导我进行适当的配置或样式设置以实现这一目标，请多多指教。

谢谢。

Answer 1

我能够 this far. Highcharts x,y coordinates are a bit challenging to use, but you needed to do a bit more styling on buttonPosition,inputPosition, and Title (see screenshot) 将它们移到右侧：

HTML:

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js">
</script>
<div id="container" style="height: 400px; min-width: 310px"></div>

JavaScript:

Highcharts.stockChart('container', {
  chart: {
    marginLeft: 300,
  },
  navigator: {
    enabled: false
  },
  scrollbar: {
    enabled: false
  },
  title : {
    text : 'Activity',
    x: -280
  },
  rangeSelector: {
    x: 0,
    verticalAlign: 'middle',
    buttonPosition: {
            align: 'left',
            y: 20,
            x: -140
        },
    inputPosition: {
           align: 'left',
           y: 15,
           x: -280
    },
    allButtonsEnabled: true,
    buttons: [{
      type: 'month',
      count: 3,
      text: 'Daily',
      dataGrouping: {
        forced: true,
        units: [['day', [1]]]
      }
    }, {
      type: 'year',
      count: 1,
      text: 'Weekly',
      dataGrouping: {
        forced: true,
        units: [['week', [1]]]
      }
    }, {
      type: 'all',
      text: 'Monthly',
      dataGrouping: {
        forced: true,
        units: [['month', [1]]]
      }
    }],
    buttonTheme: {
      width: 60
    },
    selected: 2
  },


  legend: {
        width: 100,
        align: 'left',
        x: 0, // = marginLeft - default spacingLeft
        y: -100,
        itemWidth: 100,
        borderWidth: 1
  },
  xAxis: {
    type: 'datetime',
    dateTimeLabelFormats: {
      month: '%e. %b',
      year: '%b'
    }
  },
  series: [{
    name: 'Label 1',
    color: "#00aade",
    data: [[1501545600000, 5], [1504224000000,4], [1506816000000, 6],[1509494400000,5]]
  },
  {
    name: 'Label 2',
    color: "#8cc63e",
    data: [[1501545600000, 1], [1504224000000,0], [1506816000000, 2],[1509494400000,0]]
  }]
});

图例似乎没有呈现 - 检查以确保您的数据格式正确，并尝试使用 x 和 y。

Answer 2

这是我能得到的最接近的

http://jsfiddle.net/0yax1bav/5/

左边加间距：

chart: {
    spacingLeft: 300,
},

将图例向左移动：

legend: {
    enabled: true,
    align: 'left',
    verticalAlign: 'top',
    layout: 'vertical',
    x: -250,
    y: 150
},

将标题向左移动：

title : {
    align: 'left',
    x: -280,
    text : 'Activity',
    floating: true
},

向左移动范围：

rangeSelector: {
    floating: true,
    x: 0,
    verticalAlign: 'middle',
    buttonPosition: {
        align: 'left',
        y: 20,
        x: -140
    },
    inputPosition: {
        align: 'left',
        y: 15,
        x: -280
    },
    ...

禁用导出按钮：

exporting:{
    buttons:{
        contextButton: {
            enabled: false
        }
    }
}

Highcharts.stockChart('container', {
  chart: {
    spacingLeft: 300,
  },
  legend: {
        enabled: true,
        align: 'left',
        verticalAlign: 'top',
        layout: 'vertical',
        x: -250,
        y: 150
    },
  navigator: {
    enabled: false
  },
  scrollbar: {
    enabled: false
  },
  exporting:{
    buttons:{
        contextButton: {
            enabled: false
        }
    }
  },
  title : {
    align: 'left',
    x: -280,
    text : 'Activity',
    floating: true
  },
  rangeSelector: {
    floating: true,
    x: 0,
    verticalAlign: 'middle',
    buttonPosition: {
            align: 'left',
            y: 20,
            x: -140
        },
    inputPosition: {
           align: 'left',
           y: 15,
           x: -280
    },
    allButtonsEnabled: true,
    buttons: [{
      type: 'month',
      count: 3,
      text: 'Daily',
      dataGrouping: {
        forced: true,
        units: [['day', [1]]]
      }
    }, {
      type: 'year',
      count: 1,
      text: 'Weekly',
      dataGrouping: {
        forced: true,
        units: [['week', [1]]]
      }
    }, {
      type: 'all',
      text: 'Monthly',
      dataGrouping: {
        forced: true,
        units: [['month', [1]]]
      }
    }],
    buttonTheme: {
      width: 60
    },
    selected: 2
  },
  xAxis: {
    type: 'datetime',
    dateTimeLabelFormats: {
      month: '%e. %b',
      year: '%b'
    }
  },
  series: [{
    name: 'Label 1',
    color: "#00aade",
    data: [[1501545600000, 5], [1504224000000,4], [1506816000000, 6],[1509494400000,5]]
  },
  {
    name: 'Label 2',
    color: "#8cc63e",
    data: [[1501545600000, 1], [1504224000000,0], [1506816000000, 2],[1509494400000,0]]
  }]
});

股票图表时间线按钮和日期字段与图表左对齐

Stock chart timeline buttons and date field left align with chart

button

highcharts

highstock

datefilter

leftalign