HighChart

[rainit2006]

No description provided.

[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]

其他链接：
rainit2006/My_AWS-Cloud#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
            }]

        });
    }
);