【问题标题】:update the yAxis min value and tooltip dynamically in highcharts在 highcharts 中动态更新 yAxis 最小值和工具提示
【发布时间】:2014-11-13 00:30:20
【问题描述】:

我无法将图表的 yaxis min tick 动态更新为 0。我试图为我正在处理的所有类型的图表构建一个通用图表。一些图表有负值,所以我需要负轴和带百分比的柱形图,没有负轴。我在 javascript 代码中设置一个参数以查看它是否为百分比,然后根据它显示 y 轴的最小刻度。此外,工具提示必须是动态的,这是我无法实现的。我在当前的方法中遗漏了一些东西 这是fiddle

$(function () {
    var isPercent = 'true';
    $('#container').highcharts({
        chart: {
            type: 'column'
        },

        series: [{
            name: '1',
            data: [10, 31, 100, 89, 92, 12]
        }, {
            name: '2',
            data: [90, 69, 0, 11, 8, 88]
        }, {
            name: '3',
            data: [90, 69, 0, -11, 8, 88],
            type: 'line'
        }]
    },function(chart){
        if(isPercent === 'true') {
                chart.options.yAxis['min'] = 0;
                console.log(chart.options.yAxis['min']);
            }


    });
});

【问题讨论】:

  • 设置 yAxis 的最小值不会使数据发生变化。您应该使用您的数据。在数据中搜索负值并将其设置为 0。

标签: javascript jquery charts highcharts


【解决方案1】:
$(function () {
    var isPercent = 'true';
        $('#container').highcharts({
            chart: {
                type: 'column'
            },
            yAxis:{
                min : (isPercent === 'true' ? 0 : null),
                labels:{
                    format:(isPercent === 'true' ? '{value}%' : '{value}'),
                }
            },
            tooltip:{
                pointFormat:'<span style="color:{series.color}">{series.name}</span>: <b>{point.y:,.0f}' + (isPercent === 'true' ? '%' : '') + '</b><br/>'
            },
            series: [{
                name: '1',
                data: [10, 31, 100, 89, 92, 12]
            }, {
                name: '2',
                data: [90, 69, 0, 11, 8, 88]
            }, {
                name: '3',
                data: [90, 69, 0, -11, 8, 88],
                type: 'line'
            }]
        });
    });

这是最低限度的。 更新: http://jsfiddle.net/CaPG9/31/

像这样?

【讨论】:

  • 如果 isPercent 为真,那么我必须在值的末尾显示%,否则只需将数字保留为没有% 符号。
  • pointFormat: '&lt;span style="color:{series.color}"&gt;{series.name}&lt;/span&gt;: &lt;b&gt;{point.y:,.0f}&lt;/b&gt;&lt;br/&gt;'我有这个
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2021-04-04
  • 1970-01-01
  • 2022-07-14
相关资源
最近更新 更多