1. 首页
  2. 问答
  3. 如何在javascript中创建一个散景颜色映射器？

如何在javascript中创建一个散景颜色映射器？

2017-10-12 77 views
0

我愿做以下的Python相当于单机BokehJS如何在javascript中创建一个散景颜色映射器？

color_mapper = bokeh.models.mappers.LogColorMapper('Viridis256',low=vmin,high=vmax)

我该怎么办呢？位于JavaScript CDN文件中的颜色映射器在哪里？ 他们似乎并不在这里，例如：

https://cdn.pydata.org/bokeh/release/bokeh-widgets-0.12.7.js

而不是在这里或者：

https://cdn.pydata.org/bokeh/release/bokeh-api-0.12.7.js

我试图按照实例这样的：

https://bokeh.pydata.org/en/latest/docs/user_guide/bokehjs.html#minimal-complete-example

谢谢提前

来源

2017-10-12 Aaron Watters

回答

1

阅读Bokeh文档和js源代码后，这似乎与版本0.12.5

var color_mapper = new Bokeh.LogColorMapper({palette:'Viridis256', low:0, high:16});

我确实尝试在下面的例子中得到一些理智的结果，但没有太大的成功。也许你可以进一步改进这个代码。这是基于python的源码Updating color mapper in a bokeh plot with taptool 尝试点击按钮“添加一些数据！”很多时候，更多的则10

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
    <meta name="robots" content="noindex, nofollow"> 
    <meta name="googlebot" content="noindex, nofollow"> 
     <script type="text/javascript" src="https://cdn.pydata.org/bokeh/release/bokeh-0.12.5.min.css" type="text/css"></script> 
     <script type="text/javascript" src="https://cdn.pydata.org/bokeh/release/bokeh-0.12.5.min.js"></script> 
     <script type="text/javascript" src="https://cdn.pydata.org/bokeh/release/bokeh-api-0.12.5.min.js"></script> 
    <title> by bokeh</title> 
</head> 
<body> 
<div> 
<div id="myplot" /> 
</div> 
<button onclick="addPoint()">Add some data!</button> 

<script type='text/javascript'>//<![CDATA[ 
// arrays to hold data 
var source = new Bokeh.ColumnDataSource({ 
    data: { x: [Math.random() * 10.0], y: [Math.random() * 10.0], humidity: [0, 10.0] } 
}); 
var color_mapper = new Bokeh.LogColorMapper({palette:'Viridis256', low:0, high:16}); 

// make the plot and add some tools 
var tools = "pan,crosshair,wheel_zoom,box_zoom,reset,save"; 

var plot = Bokeh.Plotting.figure({title:'Example of Random data', tools: tools, height: 300, width: 300}); 

var pglyph = plot.patches({ field: "x" }, { field: "y" }, 
    { fill_color: { field: "humidity", transform: color_mapper}}, 
        { source: source, alpha: 1, line_width: 4}) 

var scatterData = plot.line({ field: "x" }, { field: "y" }, 
    { source: source, line_width: 10 }); 

// Show the plot, appending it to the end of the current 
// section of the document we are in. 
Bokeh.Plotting.show(plot, document.getElementById('myplot')); 

function addPoint() { 
    // The data can be added, but generally all fields must be the 
    // same length. 
    source.data.x.push(Math.random() * 10.0); 
    source.data.y.push(Math.random() * 10.0); 
    // Also, the DataSource object must be notified when it has changed. 
    source.trigger('change'); 
} 
//]]> 
</script> 
</body> 
</html>

来源

2017-10-13 00:29:49 svujic

相关问题

 相关问题