标签: highcharts

我在Zurb的Foundation框架中使用Highcharts进行课堂项目.我在章节标签中有三个图表.一个在12列div中,另外两个在6列div中的同一行.

当页面加载时,特色图表不占用12列的可用宽度,两个较小的图表溢出它们的6列.但是,当窗口调整大小或我尝试使用Inspect元素进行调查时,图表会立即捕捉到正确的尺寸.在Chrome,FF和IE中会出现此问题.

我意识到我可以设置一个特定的宽度,但我真的想利用基金会并让他们保持敏感.

我已经调整了CSS和Highcharts初始化,但我很难过.还有其他人遇到过这个问题吗？任何人都能看到我错过的东西吗？

这是我的HTML的摘录:

<div class="row">
<div class="twelve columns">
    <!--begin tabs below--> 
    <div class="section-container tabs" data-section="tabs">
      <section>
        <p class="title" data-section-title><a href="#">Heart Disease</a></p>
        <div class="content" data-section-content id="heart">

            <div class="row feature-chart">
                <div class="large-12 columns">
                    <div id="heartTimeline-container">
                    <div id="heartTimeline"></div>
                    </div>
                </div> <!--close 12 columns-->
            </div> <!--close row-->
            <div class="row small-charts">
                <div class="large-6 columns">
                    <div id="heartDemo"></div>
                </div>
                <!--close 6-->
                <div class="large-6 columns">
                    <div id="heartStages"></div>
                </div>
                <!--close 6-->
            </div>
            <!--end row-->
        </div>
      </section>
   </div>
   </div>
   <!--end twelve columns-->

这是Highcharts js:

$(function () {
    Highcharts.setOptions({ …

我需要动态地为Highcharts图中的每一列设置不同的颜色.我的Highcharts图是:

options = {
         chart: {
             renderTo: 'chart',
             type: 'column',
             width: 450
         },
         title: {
             text: 'A glance overview at your contest’s status'
         },
         xAxis: {
             categories: ['Approved Photos', 'Pending Approval Photos', 
                          'Votes', 'Entrants'],
             labels: {
                 //rotation: -45,
                 style: {
                     font: 'normal 9px Verdana, sans-serif, arial'
                 }
             }
         },
         yAxis: {
             allowDecimals: false,
             min: 0,
             title: {
                 text: 'Amount'
             }
         },
         legend: {
             enabled: false
         },
         series: []
     };
     series = {
         name: "Amount",
         data: [],
         dataLabels: {
             enabled: true, …

我有1分钟的时间序列.我想在缺少点的图表中显示为0.

我找到了xAxis.ordinal并将其关闭,显示时间序列正确间隔开.问题是它直接在点之间绘制线条而不会为丢失的数据设置为0.

我正在绘制条形图 highchart.js

我不想显示x轴数据值.

谁能告诉我哪个选项呢？
完整配置:

var chart = new Highcharts.Chart({
                chart: {
                    renderTo: container,
                    defaultSeriesType: 'bar'
                },
                title: {
                    text: null
                },
                subtitle: {
                    text: null
                },
                xAxis: {
                    categories: [''],
                    title: {
                        text: null
                    },
                    labels: {enabled:true,y : 20, rotation: -45, align: 'right' }

                },
                yAxis: {
                    min: 0,
                    gridLineWidth: 0,
                    title: {
                        text: '',
                        align: 'high'
                    }
                },
                tooltip: {
                    formatter: function () {
                        return '';
                    }
                },
                plotOptions: {
                    bar: {
                        dataLabels: {
                            enabled: true
                        },
                        pointWidth: …

我是Angular JS的新手,并尝试通过创建指令来渲染我的highcharts(Basic Line).请告诉我我应该遵循的方法.任何帮助,将不胜感激.

这是我的高级图表脚本:

<script type="text/javascript">
$(function () {
    $('#container').highcharts({
        chart: {
            type: 'line',
            marginRight: 130,
            marginBottom: 25
        },
        title: {
            text: 'Monthly Average Temperature',
            x: -20 //center
        },
        subtitle: {
            text: 'Source: WorldClimate.com',
            x: -20
        },
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
        yAxis: {
            title: {
                text: 'Temperature (°C)'
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
        tooltip: {
            valueSuffix: '°C'
        },
        legend: {
            layout: 'vertical', …

我正在使用highcharts制作饼图,但我在为图表加载自定义颜色集时遇到问题.

这是我的代码:

     <script type="text/javascript">
     $(function () {
     Highcharts.setOptions({
     colors: ['#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263',      '#6AF9C4']
    });
    return new Highcharts.Chart({


        chart: {
            renderTo: 'trailpiechart',
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false,
            backgroundColor: "#f8f8f8",
            margin: [20, 20, 20, 20]
        },


        credits: {
            enabled: false
        },

        title: {
            text: caption
        },
        tooltip: {
            formatter: function () {
                return this.y + ' links';
            }
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: false
                },
                showInLegend: true
            }
        },
        legend: …

我有一个包含多行的Highchart.我想在某些行上禁用工具提示,并为其他行启用它.那可能吗？我看到如何全局禁用工具提示,但不是按系列禁用.

例如,在标准折线图示例中,是否可以禁用红色和蓝色线上的工具提示,但是在另外两个上禁用它？

我正在尝试通过JSON重新加载Highcharts图表的数据,基于页面中其他位置的按钮单击.最初我想显示一组默认数据(按类别支出),然后根据用户输入加载新数据(例如,按月支出).我能想到从服务器输出JSON的最简单方法是将GET请求传递给PHP页面,例如$ .get('/ dough/includes/live-chart.php？mode = month',检索这个按钮的ID属性中的值.

这是我到目前为止检索默认数据(按类别支出).需要找到如何根据用户输入按需将完全不同的数据加载到饼图中:

$(document).ready(function() {
            //This is an example of how I would retrieve the value for the button
            $(".clickMe").click(function() {
                var clickID = $(this).attr("id");
            });
            var options = {
                chart: {
                    renderTo: 'graph-container',
                    margin: [10, 175, 40, 40]
                },
                title: {
                    text: 'Spending by Category'
                },
                plotArea: {
                    shadow: null,
                    borderWidth: null,
                    backgroundColor: null
                },
                tooltip: {
                    formatter: function() {
                        return '<b>'+ this.point.name +'</b>: $'+ this.y;
                    }
                },
                credits: {
                    enabled: false
                },
                plotOptions: …

有人能指出我如何本地化与HighCharts js文件中硬编码的日期相关的字符串.例如,我希望图表显示本地化的值'Fév',而不是x轴上的默认'Feb'日期标签.我尝试通过在实例化图表之前设置语言对象上的选项来实现本地化:

Highcharts.setOptions({
lang: {
    months: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'],
    weekdays: ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi']
} });

但图表仍显示默认值.

js解决问题.

简短的问题:有没有办法min/max在创建图表后在Highcharts中设置.我知道初始设置,如y: {min: 100,max: 200}图表初始化,但我想稍后动态更改最大/最小.

谢谢