如何让 Highcharts 迷你图显示在我的页面上。

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>

我花了好几个小时试图让它发挥作用。谁能指出我做错了什么？我一直在使用这个 link: http://jsfiddle.net/cainmodyo/VhxDA/ along with the highcharts website: http://www.highcharts.com/demo/sparkline/。在此先感谢您能给我的任何帮助！

Answer 1

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

使用 renderTo 属性的 chart
在容器的 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

如何让 Highcharts 迷你图显示在我的页面上。

How to Get Highcharts Sparkline to Show Up On My Page.

html

javascript

highcharts

sparklines