Question

我在Highcharts中将Solid Gauge与google工作表集成时出现问题...可以使用线条，条形图等，但这无法提取数据..有没有人在Highcharts中做过类似的事情？

$(function () {

    var gaugeOptions = {

        chart: {
            type: 'solidgauge'
        },

        title: null,

        pane: {
            center: ['50%', '85%'],
            size: '140%',
            startAngle: -90,
            endAngle: 90,
            background: {
                backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE',
                innerRadius: '60%',
                outerRadius: '100%',
                shape: 'arc'
            }
        },

        tooltip: {
            enabled: false
        },

        // the value axis
        yAxis: {
            stops: [
                [0.1, '#55BF3B'], // green
                [0.5, '#DDDF0D'], // yellow
                [0.9, '#DF5353'] // red
            ],
            lineWidth: 0,
            minorTickInterval: null,
            tickPixelInterval: 400,
            tickWidth: 0,
            title: {
                y: -70
            },
            labels: {
                y: 16
            }
        },

        plotOptions: {
            solidgauge: {
                dataLabels: {
                    y: 5,
                    borderWidth: 0,
                    useHTML: true
                }
            }
        }
    };

    // The speed gauge
    $('#container-speed').highcharts(Highcharts.merge(gaugeOptions, {
        yAxis: {
            min: 0,
            max: 200,
            title: {
                text: 'Speed'
            }
        },

        credits: {
            enabled: false
        },

        series: [{
            name: 'Speed',
            data: [80],
            dataLabels: {
                format: '<div style="text-align:center"><span style="font-size:25px;color:' +
                    ((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y}</span><br/>' +
                       '<span style="font-size:12px;color:silver">km/h</span></div>'
            },
            tooltip: {
                valueSuffix: ' km/h'
            }
        }]

    }));

    // The RPM gauge
    $('#container-rpm').highcharts(Highcharts.merge(gaugeOptions, {
        yAxis: {
            min: 0,
            max: 5,
            title: {
                text: 'RPM'
            }
        },

        series: [{
            name: 'RPM',
            data: [1],
            dataLabels: {
                format: '<div style="text-align:center"><span style="font-size:25px;color:' +
                    ((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y:.1f}</span><br/>' +
                       '<span style="font-size:12px;color:silver">* 1000 / min</span></div>'
            },
            tooltip: {
                valueSuffix: ' revolutions/min'
            }
        }]

    }));

    // Bring life to the dials
    setInterval(function () {
        // Speed
        var chart = $('#container-speed').highcharts(),
            point,
            newVal,
            inc;

        if (chart) {
            point = chart.series[0].points[0];
            inc = Math.round((Math.random() - 0.5) * 100);
            newVal = point.y + inc;

            if (newVal < 0 || newVal > 200) {
                newVal = point.y - inc;
            }

            point.update(newVal);
        }

        // RPM
        chart = $('#container-rpm').highcharts();
        if (chart) {
            point = chart.series[0].points[0];
            inc = Math.random() - 0.5;
            newVal = point.y + inc;

            if (newVal < 0 || newVal > 5) {
                newVal = point.y - inc;
            }

            point.update(newVal);
        }
    }, 2000);


});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>

<script src="http://code.highcharts.com/modules/solid-gauge.js"></script>

<div style="width: 600px; height: 400px; margin: 0 auto">
	<div id="container-speed" style="width: 300px; height: 200px; float: left"></div>
	<div id="container-rpm" style="width: 300px; height: 200px; float: left"></div>
</div>

Answer 1

看起来可能是错误，请在此处报告：https://github.com/highslide-software/highcharts.com/issues/4427

Answer 2

工作，但是，我使用来自Highchart云的JS。

function parseData(completeHandler, chartOptions) {
	try {
		var dataOptions = {
  "googleSpreadsheetWorksheet": "3",
  "endColumn": null,
  "seriesMapping": [
    {
      "x": 0
    }
  ],
  "googleSpreadsheetKey": "1u0vGMYJM-iAP04NMARJuB875Y3xOj8gDGPbfzEf1FL8",
  "startRow": null,
  "startColumn": null,
  "endRow": null
};
		dataOptions.sort = true
		dataOptions.complete = completeHandler;
		Highcharts.data(dataOptions, chartOptions);
	} catch (error) {
		console.log(error);
		completeHandler(undefined);
	}
}

var template = {
	chart: {
		renderTo: 'container'
	},
	navigation: {
		menuItemStyle: {
			fontFamily: Highcharts.SVGRenderer.prototype.getStyle().fontFamily,
			padding: '2px 10px'
		}
	},
	
};
var chartOptions = {
  "plotOptions": {
    "solidgauge": {
      "dataLabels": {
        "useHTML": true,
        "borderWidth": 0,
        "y": 10
      }
    }
  },
  "yAxis": {
    "tickPixelInterval": 50,
    "tickWidth": 0,
    "minorTickInterval": null,
    "min": 0,
    "max": 16,
    "stops": [
      [
        0.1,
        "#55BF3B"
      ],
      [
        0.5,
        "#DDDF0D"
      ],
      [
        0.9,
        "#DF5353"
      ]
    ],
    "title": {
      "y": -70,
      "style": {
        "fontSize": 20
      },
      "text": null
    },
    "lineWidth": 0,
    "labels": {
      "y": 16
    }
  },
  "xAxis": {
    "labels": {
      "format": null
    }
  },
  "credits": {
    "enabled": false
  },
  "series": [
    {
      "dataLabels": {
        "format": "\u003cdiv style\u003d\"text-align:center\"\u003e\u003cspan style\u003d\"font-size:25px;color:#000000\"\u003e{y}\u003c/span\u003e\u003c/div\u003e"
      },
      "index": 0
    }
  ],
  "subtitle": {
    "text": null
  },
  "tooltip": {
    "enabled": false
  },
  "title": {
    "text": "METAS MÊS"
  },
  "pane": {
    "startAngle": "-90",
    "size": "140%",
    "background": {
      "backgroundColor": "#EEE",
      "innerRadius": "60%",
      "outerRadius": "100%",
      "shape": "arc"
    },
    "center": [
      "50%",
      "85%"
    ],
    "endAngle": "90"
  },
  "chart": {
    "type": "solidgauge"
  }
};
parseData(function (dataOptions) {
	// Merge series configs
	if (chartOptions.series && dataOptions) {
		Highcharts.each(chartOptions.series, function (series, i) {
			chartOptions.series[i] = Highcharts.merge(series, dataOptions.series[i]);
		});
	}
	var options = Highcharts.merge(dataOptions, chartOptions, template);
	var chart = new Highcharts['Chart'](options);
}, chartOptions);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://akasicuro.com/plataforma/highstock-cloud.js"></script>

<div id="container" style="width:100%; height:100%;max-width:1000px;margin: 0 auto"></div>

Solid Gauge Highcharts数据电子表格/ Google表格

2 个答案: