javascript - 如何让 Highcharts Sparkline 显示在我的页面上。

Question

下面是我用来尝试生成 highcharts 迷你图的整个文档:

<script>
var sparkOptions = {
    title: {
        text: ''
    },
    credits: false,
    chart: {
        renderTo: 'container',
        width: 120,
        height: 20,
        type: 'area',
        margin: [2, 0, 2, 0],
        style: {
            overflow: 'visible'
        },
        skipClone: true
    },
    yAxis: {
        endOnTick: false,
        startOnTick: false,
        labels: {
            enabled: false
        },
        title: {
            text: null
        },
        tickPositions: [0]
    },
    xAxis: {
        labels: {
            enabled: false
        },
        title: {
            text: null
        },
        startOnTick: false,
        endOnTick: false,
        tickPositions: []
    },
    legend: {
        enabled: false
    },
    tooltip: {
        enabled: false
    }
};

$('#the_chart').highcharts(sparkOptions);
var t = $('#the_chart').highcharts();

t.addSeries({
    data: [1, 2, 3, 4, 5]
});
</script>

<div id="container" style="height: 40px; width: 200px;">
    <div id="the_chart"></div>
</div>

我一直在寻找几个小时来尝试让它发挥作用。谁能指出我做错了什么？我一直在使用这个链接:http://jsfiddle.net/cainmodyo/VhxDA/以及 highcharts 网站:http://www.highcharts.com/demo/sparkline/ 。预先感谢您能给我的任何帮助!

Answer 1

在 Highcharts 中，您有两种方法来定义图表的放置位置:

1. 使用chart的renderTo属性
2. 在容器的 JQuery 对象上调用 highcharts() 函数(例如:$('#container').highcharts({options})

在您的代码中，您正在使用这两种方法，因为您在 sparkOptions 中定义了 renderTo: 'container'，然后通过另一个 JQuery 对象调用 highcharts 方法 $ ('#the_chart').highcharts(sparkOptions);

要使其正常工作，您应该更改最后几行:

$('#the_chart').highcharts(sparkOptions);
var t = $('#the_chart').highcharts();

至:

var t = new Highcharts.Chart(sparkOptions);

然后删除 html 中多余的容器，即 id 为 the_chart 的容器。

此外，您应该将代码包装到 '$(function () { << HERE YOUR SCRIPT >>});'以确保它在加载 Highcharts 后执行。

Fiddle