如何在PLOTLY JS中为每个子图添加标题

时间:2018-07-30 11:14:29

标签: javascript graph title plotly.js

就像主题一样。 我从阴暗地阅读文档,但没有找到任何有用的信息。也许有人知道如何在PLOTLY JS中为每个图添加标题?

2 个答案:

答案 0 :(得分:3)

目前,您无法直接设置子图标题。 但是您可以使用$input = array( 'field_5b23d04fef8a6' => '', 'field_5b23d04fefa99' => '', 'field_5b23d04fefe85' => '', 'field_5b23d04ff0077' => '', 'field_5b23d04ff026c' => '', 'field_5b23d0bdb3c1a' => 'Version 1', 'field_5b23d0f48538b' => '', 'field_5b23d0f485772' => '', 'field_5b23d0d52be2d' => '', 'field_5b5ed10a6a7bc' => '', 'field_5b5ed10a6bcf5' => array( array( 'field_5b5ed10acd264' => array( array( 'field_5b5ed10b0c9ca' => '0', 'field_5b5ed10b0cce2' => 'TEST1234', 'field_5b5ed10b0d0fd' => 'Download title', 'field_5b5ed10b0d4e2' => 'EN', 'field_5b5ed10b0d72e' => 'A00', 'field_5b5ed10b0df27' => '887', ), ), ), ), 'field_5b23d088500a4' => '', ); // recursively re-key array function dostuff($input){ // always refer to self, even if you rename the function $thisfunction = __function__; $output = array(); foreach($input as $key => $value){ // change key $newkey = (is_string($key) ? preg_replace('/^field_/', 'post_title_', $key) : $key); // iterate on arrays if(is_array($value)){ $value = $thisfunction($value); } $output[$newkey] = $value; } return $output; } var_dump(dostuff($input)); 设置子图标题。

听力是example

// general function for recursively doing something
// $input -> array() / the array you wan to process
// $valuefunction -> callable | null / function to run on all values *
// $keyfunction -> callable | null / function to run on all keys *
//   * at least one has to defined or there is nothing to do
//   callable has two inputs
//     $input -> current branch
//     $depth -> (int) how deep in the structure are we
//   i.e: recursion($some_array, function($branch, $depth){something..}, 'trim');
function recursion($input, $valuefunction = false, $keyfunction = false){
    if(!is_array($input)){
        trigger_error('Input is '.gettype($input).'. Array expected', E_USER_ERROR);
        return null;
    }
    if(!is_callable($valuefunction)){$valuefunction = false;}
    if(!is_callable($keyfunction)){$keyfunction = false;}
    if(!$valuefunction && !$keyfunction){
        trigger_error('Input is unchanged!', E_USER_WARNING);
        return $input;
    }
    // use recursion internally, so I can pass stuff by reference
    // and do the above checks only once.
    $recurse = function(&$branch, $depth = 0) use (&$recurse, &$valuefunction, &$keyfunction){
        $output = array();
        foreach($branch as $key => $value){
            $key = $keyfunction ? $keyfunction($key, $depth) : $key;
            $output[$key] = (is_array($value) ?
                $recurse($value, $depth + 1) :
                ($valuefunction ?
                    $valuefunction($value, $depth) :
                    $value
                )
            );
        }
        return $output;
    };
    return $recurse($input);
}

$valuefunction = function($value, $depth){
    return is_string($value) ? $depth.'_'.$value : $value;
};
function keyfunction($key){
    return is_string($key) ? preg_replace('/^field_/', 'post_title_', $key) : $key;
}

var_dump(recursion($input, $valuefunction, 'keyfunction'));

Annotation text plotly.js

答案 1 :(得分:0)

github 上有一个功能请求。在本次讨论中,nicolaskruchten 发布了另一种解决方法:https://github.com/plotly/plotly.js/issues/2746#issuecomment-810195118。它仍在使用注释但引用轴域。这具有相对于子图的正确定位的优点,并且即使在缩放时注释也保持固定。

在要放置标题的轴上定义域(域是整个绘图画布的“共享”,子图轴是:

    layout: {
      xaxis: { 
        domain: [0,0.48] ,
      },
      xaxis2: {
        domain: [0.52, 1],
      }
     }

注释本身可以在这个(或两个)轴上引用域:

  annotations: [
    {
      text: "X1 title",
      x: 0,
      xref: "x domain",
    },
    {
      text: "X2/Y2 title",
      x: 0,
      xref: "x2 domain",
    }
  ]