HighChart

[rainit2006]

---

[rainit2006]

注意点：

元素要写在 chart代码前面。 **HighChart.js** **chart的部分相关属性说明** renderTo: 'container', //图表的页面显示容器(也就是要显示到的div) defaultSeriesType: 'line', //图表类型(line、spline、scatter、splinearea、bar、pie、area、column) marginRight: 50, //上下左右空隙(图表跟图框之间) marginBottom: 60, //下面空隙如果不够大，图例说明有可能看不到 plotBackgroundImage: '../graphics/skies.jpg', //(图表的)背景图片 plotBackgroundColor: //背景颜色 width: 1000, //图框（最外层）宽(默认800) height: 500, //图框高(默认500) backgroundColor: "red" //图框的背景颜色 borderColor: "red" //图框的边框颜色 borderRadius: 5, //图框的圆角大小 borderWidth: 9, //图框的边框大小 inverted: false, //(使图)倒置 plotBorderColor: "red", //图表的边框颜色 plotBorderWidth: 0, //图表的边框大小 plotShadow: false, //图表是否使用阴影效果 reflow: false, shadow:true //图框是否使用阴影 showAxes: false, //是否最初显示轴 spacingTop: 100, //图表上方的空白 spacingRight: 10, spacingBottom: 15, spacingLeft: 10, colors: [...] 【highcharts】 グラフの右下に表示される"highcharts.com"というクレジットを消す方法 ``` 加入下面代码： credits: { enabled: false } 例： $(function () { var chart = new Highcharts.Chart({ chart: { renderTo: 'container-pra1.14', type: 'line', 　　　　　　plotBackgroundColor: '#FFFFFF', plotShadow: true }, credits: { enabled: false } 　略 ```

[rainit2006]

其他链接： https://github.com/rainit2006/My_AWS-Cloud/issues/20

• 完整的sample code https://www.tutorialspoint.com/highcharts/highcharts_line_basic.htm

• 从外部json文件里读取数据的代码例子：

  
  $.getJSON(
  'https://cdn.rawgit.com/highcharts/highcharts/v6.0.5/samples/data/range.json',
  function (data) {
  
      Highcharts.chart('container', {
  
          chart: {
              type: 'arearange',
              zoomType: 'x'
          },
  
          title: {
              text: 'Temperature variation by day'
          },
  
          xAxis: {
              type: 'datetime'
          },
  
          yAxis: {
              title: {
                  text: null
              }
          },
  
          tooltip: {
              crosshairs: true,
              shared: true,
              valueSuffix: '°C'
          },
  
          legend: {
              enabled: false
          },
  
          series: [{
              name: 'Temperatures',
              data: data
          }]
  
      });
  }
  );