Question

image:我需要这种规格表

我如何创建上面的表图

我的车速表已工作，但不能满足需要。

Plotly js Charts API中是否有一种方法可以使用三角形而不是速度计？

我如何创建上面的表图

我的车速表已工作，但不能满足需要。

Plotly js Charts API中是否有一种方法可以使用三角形而不是速度计？

// Enter a speed between 0 and 180
var level = 135;

// Trig to calc meter point
var degrees = 180 - level,
	 radius = .5;
var radians = degrees * Math.PI / 180;
var x = radius * Math.cos(radians);
var y = radius * Math.sin(radians);

// Path: may have to change to create a better triangle
var mainPath = 'M -.0 -0.025 L .0 0.025 L ',
	 pathX = String(x),
	 space = ' ',
	 pathY = String(y),
	 pathEnd = ' Z';
var path = mainPath.concat(pathX,space,pathY,pathEnd);

var data = [{ type: 'scatter',
   x: [0], y:[0],
	marker: {size: 28, color:'850000'},
	showlegend: false,
	name: 'speed',
	text: level,
	hoverinfo: 'text+name'},
  { values: [50/4, 50/4, 50/4, 50/4, 50],
  rotation: 90,
  text: ['TOO FAST!', 'Pretty Fast', 'Fast', 'Average', ''],
  textinfo: 'text',
  textposition:'inside',	  
  marker: {colors:['rgba(14, 127, 0, .5)', 'rgba(110, 154, 22, .5)',
						 'rgba(170, 202, 42, .5)', 'rgba(202, 209, 95, .5)',
						
						 'rgba(255, 255, 255, 0)']},
  labels: ['', '121-150', '91-120', '61-90', ''],
  hoverinfo: 'label',
  hole: .8,
  type: 'pie',
  showlegend: false
},{ values: [50/4, 50/4, 50/4, 50/4, 50],
  rotation: 90,
  text: ['', '', '', '', ''],
  textinfo: 'text',
  textposition:'inside',	  
  marker: {colors:['rgba(14, 127, 0, .5)', 'rgba(110, 154, 22, .5)',
						 'rgba(170, 202, 42, .5)', 'rgba(202, 209, 95, .5)',
						
						 'rgba(255, 255, 255, 0)']},
  labels: ['', '121-150', '91-120', '61-90', ''],
  hoverinfo: 'label',
  hole: .5,
  type: 'pie',
  showlegend: false
}];

var layout = {
   images: [
      {
        "source": "https://images.plot.ly/language-icons/api-home/python-logo.png",
        "xref": "paper",
        "yref": "paper",
        "x": 0.25,
        "y": 0.53,
        "sizex": 0.1,
        "sizey": 0.1,
        "xanchor": "right",
        "yanchor": "bottom"
      },
      {
        "source": "https://images.plot.ly/language-icons/api-home/js-logo.png",
        "xref": "x",
        "yref": "y",
        "x": 1.5,
        "y": 2,
        "sizex": 1,
        "sizey": 1,
        "xanchor": "right",
        "yanchor": "bottom"
      },
      {
        "source": "https://images.plot.ly/language-icons/api-home/r-logo.png",
        "xref": "x",
        "yref": "y",
        "x": 1,
        "y": 3,
        "sizex": 2,
        "sizey": 2,
        "sizing": "stretch",
        "opacity": 0.4,
        "layer": "below"
      },
      {
        "source": "https://images.plot.ly/language-icons/api-home/matlab-logo.png",
        "xref": "x",
        "yref": "paper",
        "x": 3,
        "y": 0,
        "sizex": 0.5,
        "sizey": 1,
        "opacity": 1,
        "xanchor": "right",
        "yanchor": "middle"
      },
    ],
  shapes:[{
      type: 'path',
      path: path,
      fillcolor: '850000',
      line: {
        color: '850000'
      }
    }],
  title: '<b>Gauge</b> <br> Speed 0-100',
  height: 1000,
  width: 1000,
  xaxis: {zeroline:false, showticklabels:false,
			 showgrid: false, range: [-1, 1]},
  yaxis: {zeroline:false, showticklabels:false,
			 showgrid: false, range: [-1, 1]}
};

Plotly.newPlot('myDiv', data, layout, {showSendToCloud:true});

<head>
  <!-- Plotly.js -->
  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>

<body>
  
  <div id="myDiv"><!-- Plotly chart will be drawn inside this DIV --></div>
  <script>
    <!-- JAVASCRIPT CODE GOES HERE -->
  </script>
</body>

图解图表-如何在半圆内附加图像规

0 个答案: