Question

我正在通过JS填充highchart数据，该数据来自页面上的文本框，该内容被动态替换：

function myFunction() {
    var myvar = document.getElementById("TextBox1").value;

    Highcharts.chart('piechart2', {
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false,
            type: 'pie'
        },
        credits: {
            enabled: false
        },
        title: {
            text: 'Data, 2018'
        },
        tooltip: {
            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                    style: {
                        color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                    }
                }
            }
        },
        series: [{ name: 'Permits', data: myvar }]
    });
};

我的文本字段：

<input name="TextBox1" value="[{"name":"Closed","y":1},{"name":"Rejected","y":1}]" id="TextBox1" type="text">

当前，当执行JS时，图表无法呈现，我相信是因为用于数据的myvar没有正确复制。如果我用文本框的内容替换“ myvar”，则图表将正确显示。

感谢您的帮助。

Answer 1

我猜您正在设置值的字符串有一个示例输入？看来您要使用json字符串化的东西？如果是这样，则需要在整个内容中使用一种报价，然后将另一种报价用作内部报价，例如：

value='[{"name":"Closed","y":1},{"name":"Rejected","y":1}]'

然后，我猜您需要先对它进行脱弦处理，然后再将其提供给高位图表

var myvar = document.getElementById("TextBox1").value;
myvar = JSON.parse(myvar)

这假设您期望在文本框中键入有效的json，但这可能不是一个很好的假设。另一个解决方案可能是具有多个输入，每个输入将获取您需要的每个值，然后将它们全部粘贴到一个格式正确的对象中。

尝试将数据从文本字段加载到highchart

1 个答案: