【问题标题】:Reverse one chart and leave the other unreversed - Synchronized highcharts反转一个图表,不反转另一个图表 - 同步的高位图表
【发布时间】:2018-11-14 02:17:45
【问题描述】:

要反转图表,您必须添加reversed: true。它可以在xAxisyAxis 上完成。在Highcharts 提供的这个示例中:https://jsfiddle.net/omaraziz/zg516ruk/ 当我添加反转时,它会反转所有图表。我怎样才能只反转一张图表?更一般地说,当两者同步时,在一个图表上而不是另一个图表上进行更多自定义的正确方法是什么? 我选择同步是因为我希望在从右到左扫描时同时显示两者的值,反之亦然。

现在,每次我更改图例位置、反转 xAxis 或 yAxis、使用工具提示、设置 yAxis 的最大值和最小值等时,它都会同时执行。

这是我的 JSON 数据,以防万一通过 JSON 文件:https://omaraziz.me/CC-chart/activity.json

【问题讨论】:

  • 通常你只配置一个图表,你的配置选项适用于所有图表的原因是因为你正在使用相同的代码创建3个图表,从这里开始`activity.datasets.forEach(function(dataset, i) {. There are many ways to mitigate this, for example you could use if` 逻辑,并匹配您想要反转的图表的某些元素。您可以删除循环并复制代码与图表一样多次,然后您可以在创建每个图表之前对其进行编辑。或者,您可以为稍后选择并应用选项的图表创建一个 ID。

标签: javascript charts highcharts


【解决方案1】:

您可以使用索引变量i 来识别图表。例如,下面的 IFFE 函数仅对第二个图表返回 true:

            xAxis: {
                reversed: (function() {
                    return i === 1
                })(),
                ...
            }

现场演示:https://jsfiddle.net/BlackLabel/7fx6jdnw/

【讨论】:

    猜你喜欢
    • 2011-10-22
    • 1970-01-01
    • 1970-01-01
    • 2012-05-15
    • 1970-01-01
    • 1970-01-01
    • 2015-09-22
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多